CSS3 Transition Property

Take control of CSS3’s transition and sub-transition property to create amazing animation effects. These three examples of CSS3 transition effects used on hover will help you to understand and start writing your own css animation effects.

DEMO
DOWNLOAD

CSS3 TRANSITION PROPERTY

Provides a way to control animation speed when changing CSS properties
without using JavaScript. Instead of having property changes take effect immediately, you can cause the changes in a
property to take place over a period of time. For example, if you change the background-color of an element from
blue to green, usually the change is instantaneous. With CSS transitions you can set the time intervals for changes
to occur.

Example Usage – Single Property

transition: transition-property transition-duration transition-timing-function transition-delay;

div {
      box-shadow: 0 0 0 30px transparent;
      transition: box-shadow 0.5s ease-in-out 0s;
    }
    div:hover,
    div:active,
    dix:focus{
      box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
    }

Example Usage – All Properties

The transition property can also be called with an “all” keyword instead of explicitly specifying one or multiple css properties.

div {
      box-shadow: 0 0 0 30px transparent;
      background-color: #fdfdfd;
      transition: all 0.5s ease-in-out 0s;
    }
    div:hover,
    div:active,
    dix:focus{
      box-shadow: 0 0 0 0 rgba(255,255,255,0.2) 0.5s ease-in 0s;
      background-color: #dfdfdf;
    }

For a full list of css properties that are Animatable see here:
http://www.w3.org/TR/css3-transitions/#animatable-properties

Browser Support

CSS Transitions property based on browser type:

-webkit-transition: box-shadow 0.5s ease-out 0s;
-moz-transition: box-shadow 0.5s ease-out 0s;
-o-transition: box-shadow 0.5s ease-out 0s;
-ms-transition: box-shadow 0.5s ease-out 0s;
transition: box-shadow 0.5s ease-out 0s;

Note:

Internet Explorer 9, and earlier versions, does not support the transition property.

DEMO
DOWNLOAD