CSS transitions provide of doing simple animation with CSS based properties, and without using JavaScript or a 3rd party plug-in such as Flash. 

To make a transition work, we need to specify the CSS property with an effect we want to attach to it, and the duration of the effect. A shorthand property that may be used to cover all transition properties is called a transition property, and it is used to replace these full profile properties:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

Syntax:

selector { 

         transition: property duration timing-function delay | initial | inherit;

}

Values:

  • transition-property; Declares the property's name which an effect or effects will take place on.
  • transition-duration; Sets the duration of an effect in seconds or miliseconds.
  • transition-timing-function; The timing-function defines the speed curve of the effect's development
  • transition-delay; Delays the start of a transition by 'x' seconds or miliseconds
  • initial (default value), inherit

Multiple transitions

The transition-property can be used to achieve multiple changes as well. In such a case properties have to be separated by a comma, as shown below:

#multi-transitions  {

 transition: width 8s, height 6s, transform 2s;
       
}

Example

CSS3 transitions example:

 

›› go to examples ››