The animation
property is used as see in the previous video:
animation: NAME DURATION DELAY TIMING-FUNCTION ITERATION DIRECTION FILL-MODE PLAY-STATE;
Example:
animation: wiggle 200ms 1s ease-out 8 alternate forwards running;
Can be translated to: "Play the wiggle keyframe set (animation) over a duration of 200ms. Between two keyframes start fast and end slow, also make sure to wait 1s before you start. Play 8 animations and alternate after each animation. Once you're done, keep the final value applied to the element. Oh, and you should be playing the animation - not pausing."
Instead of this shorthand, you can also specify the individual properties:
1) animation-name
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name => animation-name: wiggle;
2) animation-duration
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) => animation-duration: 200ms;
3) animation-timing-function
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) => animation-timing-function: ease-out;
Possible timing function values are: ease-out
, ease-in
, linear
, cubic-bezier()
and a couple of others. See the above link for more details.
4) animation-delay
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) => animation-delay: 1s;
5) animation-iteration-count
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) => animation-iteration-count: 8;
6) animation-direction
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) => animation-direction: alternate;
7) animation-fill-mode
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) => animation-fill-mode: forwards;
8) animation-play-state
(https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) => animation-play-state: running;
You can read the official MDN article on CSS animations here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations