Animation
°animation-name
°animation-duration
°animation-timing-function
°animation-delay
°animation-iteration-count
°animation-direction
°animation-fill-mode
°animation-play-state
Animation-name
It's the name you put into effect
Animation-duration
This property specifies the length of time that the animation takes to complete one cycle.
Syntax
animation-duration: 6s;
Values
*time (s-ms)
Defines the time offset before the animation begins.
Animation-timing-function
The property sets how an animation progresses through the duration of each cycle.
Syntax
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
Values
1-
The animation starts slowly, accelerates in the middle and slows down at the end.
2-
The animation starts slowly and accelerates gradually until the end.
3-
The animation starts quickly and decelerates gradually until the end.
4-
The animation starts quickly and decelerates gradually until the end.
Ease-out vs ease-in-out
The speed of ease-in-out longer than the speed of ease-out.
5-
The animation has a constant speed.
6-
The animation jumps instantly to the final state.
7-
The animation stays at the initial state until the end when it instantly jumps to the final state.
8-
By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.
animation-delay
This feature is the delay of the start of movement when the cycle begins
Syntax
animation-delay: 3s;
Values
*time
Defines the time offset before the animation begins.
Example
animation-iteration-count
This property calculates the number of repetitions of a single cycle
Syntax
animation-iteration-count: infinite;
animation-iteration-count: 3;
Values
*infinite
The animation will repeat forever.
*time
Defines the time offset before the animation begins.
Example
animation-direction
The property sets whether an animation should play forwards, backwards, or alternating back and forth.
Syntax
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
Values
*normal
*reverse
*alternate
*alternate-reverse
Example
1- Normal
The animation is played forwards. When it reaches the end, it starts over at the first keyframe.
2- Reverse
The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.
3- Alternate
The animation is played forwards first, then backwards:
-starts at the first keyframe
-stops at the last keyframe
-starts again, but at the last keyframe
-stops at the first keyframe
4- Alternate-reverse
The animation is played backwards first, then forwards:
-starts at the last keyframe
-stops at the first keyframe
-starts again, but at the first keyframe
-stops at the last keyframe
animation-fill-mode
This feature works after the session has ended by returning the item to its starting location or remaining in its place
Syntax
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
Values
*none
*forwards
*backwards
*both
Example
1- None
The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.
2- Forwards
The last styles applied at the end of the animation are retained afterwards.
3- Backwards
The animation's styles will already be applied before the animation actually starts.
4- Both
The styles are applied before and after the animation plays.
animation-play-state
The property sets whether an animation is running or paused.
Syntax
animation-play-state: running;
animation-play-state: paused;
Value
*running
*paused
Examples:
- Flying Birds
- Falling Snow
Sources
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://www.quackit.com/css/css3/properties/css_animation.cfm
Top comments (0)