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;