Shorthand to set the CSS properties:

      element { animation: animation-name, animation-duration, animation-timing-function,
                       animation-delay, animation-iteration-count, animation-direction animation-fill-mode;}

This shorthand is equivalent to the following:

element {
  animation-name: animation_IDENT ;
  animation-duration: time s | time ms ;
  animation-timing-function: timing ;
  animation-delay: time s | time ms ;
  animation-iteration-count: number |infinite ;
  animation-direction: direction ;
  animation-fill-mode ;


The animation name has to first be defined in a@keyframes statement, that name can then be called by animation:

Some popular examples, rumble, spinner and marquee these are embedded in this page so you can try them in the sample area below.

@keyframes rumble {
  100% {}
  50% { transform: translateY(-0.2em) }

@keyframes spinner{
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }

A list of all CSS properties that can be animated (Mozilla).


The default animation property values, any value that is not specified in the shorthand will be set to the default, even if set separately in another css rule.

  animation-name: none;
  animation-duration: 0s ;
  animation-timing-function: ease ;
  animation-delay: 0s ;
  animation-iteration-count: 1 ;
  animation-direction: normal ;
  animation-fill-mode: none ;

Try it:

You can change the animation: spinner linear ...
to animation: rumble linear ... or animation: marquee linear ...

css sample

(CSS 3) Browser Support: IE 10, Firefox and Opera.

“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart


transform - Apply a 2D or 3D transformation to an element.
transition - CSS transition effects.

Copyright © 2013-2019
Some rights reserved