Did you find this useful?
Socialize it today.


CSS3 Transitions

Tuesday, November 27, 2012

browser

CSS3 Transitions allow web developers to introduce effects by allowing property changes in CSS values. These changes are generally defined to occur when certain events occur, such as on :hover or :focus. Transitions specify how they should transition and over what duration of time. Transition effects can be applied to a wide variety of CSS properties such as width, height, background color, opacity, and others.


Browser Support

Internet Explorer 9 does not support the transition property. Other browsers such as Internet Explorer 10, Firefox, Chrome, Safari, and Opera do provide support, but implementing vendor prefixes. So, for the time being you will need to use several vendor prefixes in your code for a cross-browser solution.


BrowserVendor Prefix
Internet Explorer 10-ms-transition
Firefox-moz-transition
Opera-o-transition
Safari-webkit-transition
Chrome-webkit-transition


Your browser may support CSS3 Transitions.

How do Transitions Work?

CSS3 transitions are effects that let an element gradually change from one style to another. To accomplish this effect, you need to specify the CSS property you want to add an effect to and the duration of the effect.


Transition Property

The transition property is a shorthand property for setting the four transition properties into a single property.


PropertyDescription
transitionA shorthand property for setting the four transition properties into a single property.
transition-propertySpecifies the name of the CSS property to which the transition is applied.
transition-durationDefines the length of time that a transition takes. Default value is "0". The transition-duration value is defined in seconds (s) or milliseconds (ms).
transition-timing-functionDescribes how the speed during a transition will be calculated. Default value is "ease". (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
transition-delayDefines when the transition will start. Default value is "0". The transition-delay value is defined in seconds (s) or milliseconds (ms).


Transition Property Syntax

transition: property duration timing-function delay;


Examples

Here is a simple example that changes the width of an element using a simple transition. Since the transition-timing-function value is not defined, the default value of "ease" will apply.


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:1px solid black;
width:100px;
height:100px;
background:#FFAA00;
-moz-transition:width 3s;
-webkit-transition:width 3s;
-o-transition:width 3s;
transition:width 3s;
}

div:hover
{
width:500px;
}

</style>
</head>
<body>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Results

Hover over the div element above, to see the transition effect.


Here is an example that shows the different timing functions.


<!DOCTYPE html>
<html>
<head>
<style> 
#main {
width: 520px;
}

#main div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ffaa00;
text-align: right;
border-radius: 5px;
}

#main:hover div {
width: 500px;
}

#main div#ease {
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}

#main div#linear {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}

#main div#easein {
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
-ms-transition: 3s ease-in;
transition: 3s ease-in;
}

#main div#easeout {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}

#main div#easeinout {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}

</style>
</head>
<body>

<div id="main">
  <div id="linear" style="top:100px">linear</div>
  <div id="ease" style="top:150px">ease</div>
  <div id="easein" style="top:200px">ease-in</div>
  <div id="easeout" style="top:250px">ease-out</div>
  <div id="easeinout" style="top:300px">ease-in-out</div>
</div>

</body>
</html>

Results

linear
ease
ease-in
ease-out
ease-in-out

Multiple Transitions

To add a transitional effect for more than one style, add more properties, separated by commas


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:1px solid black;
width:100px;
height:100px;
background:#FFAA00;
-moz-transition:width 3s, height 3s;
-webkit-transition:width 3s, height 3s;
-o-transition:width 3s, height 3s;
transition:width 3s, height 3s;
}

div:hover
{
width:500px;
height:250px;
}

</style>
</head>
<body>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Results

Hover over the div element above, to see the transition effect.


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Book of CSS3 Sergeys HTML5 CSS3 HTML CSS and JavaScript