CSS Animations Syntax Examples
Example
Our first syntax example shows the animation shorthand property using all of the available properties/parameters:
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
Our second example is a little more simple, and shows that some properties can be omitted:
animation: 3s linear 1s slidein;
/* duration | timing-function | delay | name */
Our third example shows the most minimal declaration. Note that the animation-name and animation-duration must be declared:
animation: 3s slidein;
/* duration | name */
It's also worth mentioning that when using the animation shorthand the order of the properties makes a difference. Obviously the browser may confuse your duration with your delay.
If brevity isn't your thing, you can also skip the shorthand property and write out each property individually:
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;
