Latest web development tutorials

CSS3 transitions

CSS3 transitions

CSS3, we have to add an effect that can be converted from one style to another time, without the use of Flash animation or JavaScript. Mouse over the following elements:


Mouse over the following elements:

CSS3
Transition

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

属性
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

How does it work?

CSS3 transition is an element gradually change from one style to another effect.

To achieve this, two things must be defined:

  • I want to add the effect of CSS properties
  • Specify the duration of the effect.
OperaSafariChromeFirefoxInternet Explorer

Examples

Width attribute applied transition effect, duration of 2 seconds:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Note: If youdo not specify a time limit, transition will have no effect, because the default value is 0.

The effect will change the value of the specified CSS property changes. A typical CSS property change is the user mouse over an element:

OperaSafariChromeFirefoxInternet Explorer

Examples

Provisions when the mouse pointer suspension (: hover) to the <div> element when:

div: hover
{
width: 300px;
}

try it"

Note: When the mouse cursor to the element, it gradually changes its original style


Number of changes

To add more than one effect of the change style, add attributes separated by commas:

OperaSafariChromeFirefoxInternet Explorer

Examples

Added width, height, and transition effects:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

try it"


Transition Properties

The following table lists all the transition properties:

Attributes description CSS
transition Shorthand property for setting four transition properties in one property. 3
transition-property The name of the CSS property transition provisions apply. 3
transition-duration To define the transition effect time spent. The default is 0. 3
transition-timing-function Predetermined transition effect time curve. The default is "ease". 3
transition-delay Provisions when to start the transition effect. The default is 0. 3

The following two examples set all transition attributes:

OperaSafariChromeFirefoxInternet Explorer

Examples

Use all the 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;
}

try it"

OperaSafariChromeFirefoxInternet Explorer

Examples

And examples of the same transition effects above, but uses the shorthand transition properties:

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

try it"