Tuesday 28 May 2013
Facebook StumbleUpon Twitter Google+ Pin It

CSS3 Transitions

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Mouse over the element below:
CSS3
Transition

Browser Support

PropertyBrowser Support
transition
Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property.
Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the transition property.
Note: Chrome 25, and earlier versions, requires the prefix -webkit-.

How does it work?

CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect.
OperaSafariChromeFirefoxInternet Explorer

Example

Transition effect on the width property, duration: 2 seconds:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Note: If the duration is not specified, the transition will have no effect, because default value is 0.
The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:
OperaSafariChromeFirefoxInternet Explorer

Example

Specify :hover for <div> elements:
div:hover
{
width:300px;
}

Note: When the cursor mouse out of the element, it gradually changes back to it's original style.

Multiple changes

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

Example

Add effects on the width, height, and the transformation:
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}




Transition Properties

The following table lists all the transition properties:
PropertyDescriptionCSS
transitionA shorthand property for setting the four transition properties into a single property3
transition-propertySpecifies the name of the CSS property to which the transition is applied3
transition-durationDefines the length of time that a transition takes. Default 03
transition-timing-functionDescribes how the speed during a transition will be calculated. Default "ease"3
transition-delayDefines when the transition will start. Default 03
The two examples below sets all transition properties:
OperaSafariChromeFirefoxInternet Explorer

Example

Use all transition properties in one example:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}



OperaSafariChromeFirefoxInternet Explorer

Example

The same transition effects as above, using the shorthand transition property:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}



Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

No comments: