The CSS animations (animation properties) are used to create animated elements, and replace embedded software such as Flash or scripts that may be used to do animations such as JavaScript. Therefore the CSS3 animations are intended to, at least partially (and in the future completely), replace 3rd party software packages thus reducing web page loading times and increasing scalability.

The CSS animations go even further by allowing us to define keyframes that specify what an element’s properties should be at each stage of the animation. As with transitions, it’s left up to the browser to work out how to animate a smooth change from one keyframe to the next. 

The animation property is a shorthand property for six of the animation properties:

Syntax:

selector { 

    animation: name duration timing-function delay iteration-count direction fill-mode play-state | initial | inherit;

}

Values:

The following list shows all the possible values to be used with the animation property:

  • animation-name; Defines the keyframe’s name that will be bound to a selector.
  • animation-duration; Defines how many seconds or milliseconds an animation will last.
  • animation-timing function; Defines the speed curve of the animation.
  • animation-delay; Defines a delay before the start of the animation.
  • animation-iteration-count; Defines how many the animation will be played.
  • animation-direction; Defines if animation will be played in reversed on alternate cycles.
  • animation-fill-mode; Defines the values applied to the animation outside the execution time.
  • animation-play-state; Defines if animation is running or is paused.
  • initial (default value), inherit

Within the animation property we may specify one or more of the values (as listed above), as well as initial or inherit.

NOTE: Note that examples from this moment on for simplicity reasons may not include proprietary selectors from this point on.

Example

The example with CSS3 animation property:

 

›› go to examples ››