The animation property takes as its value a space-separated list of values for the longhand animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode properties.
snippet
.verbose {
-webkit-animation-name: 'appear';
-webkit-animation-duration: 300ms;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 5s;
-webkit-animation-fill-mode: backwards;
}
/* shorthand */
.concise {
-webkit-animation: 'appear' 300ms ease-in 1 alternate 5s backwards;
}To declare multiple animations on an element, include a grouping for each animation name, with each shorthand grouping separated by a comma.
For example:
snippet
.target {
-webkit-animation:
'animationOne' 300ms ease-in 0s backwards,
'animationTwo' 600ms ease-out 1s forwards;
}
