September 22, 2013 281 Views 2 Comments

CSS3 Transition Property

SHARE THIS ARTICLE

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.

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+

DEMO DOWNLOAD

  • John

    I think using CSS to create the animated effects is a good way to add something to your site, without bogging it down with all kinds of code. I like what you have here!

  • Todd

    I use the transition effect all the time. I just like how it adds a smooth feel to what you are trying to accomplish on your site. Users seem to love it as well, it’s more modern for them as well.