When we use 'animate' we need to specify some, or all, of this list:
duration
animation-duration
This is the time in seconds (s) or milliseconds (ms) that the animation will run.
The default is 0 so you need to set this to something or your animation won't run!
easing-function
animation-timing-function
| Value |
Description |
| ease |
A slow start, then fast, then end slowly. |
| linear |
The same speed from start to end |
| ease-in |
A slow start |
| ease-out |
A slow end |
delay
animation-delay
The number of seconds to wait before starting.
iteration-count
animation-iteration-count
The number of times to repeat.
Use 'infinite' to keep going forever.
direction
animation-direction
| Value |
Description |
| normal |
The animation is played as normal (forwards) |
| reverse |
The animation is played in reverse direction (backwards) |
| alternate |
The animation is played forwards first, then backwards |
| alternate-reverse |
The animation is played backwards first, then forwards |
| initial |
Sets this property to its default value. |
fill-mode
animation-fill-mode
| Value |
Description |
| none |
The animation will not apply any styles to the target when it's not executing. |
| forwards |
The target will retain the computed values set by the last keyframe encountered during execution. |
| backwards |
The target will retain the computed values set by the first keyframe encountered during execution. |
| both |
The animation will follow the rules for both forwards and backwards. |
play-state
animation-play-state
Set to 'paused' or to 'running'
name
animation-name
The name of the @keyframes to use.