CSS3 transition


May 04, 2021 03:00 CSS3


Table of contents


CSS3 transition


CSS3 transition

In CSS3, we don't need flash animation or JavaScript to add an effect that can be transitioned from one style to another. Mouse over the following elements:


Mouse over the following elements:

CSS3
Transition

Browser support

The numbers in the table support the first browser version number of the property.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.

属性
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?

The CSS3 transition is the gradual change of an element from one style to another.

To achieve this, two elements must be specified:

  • Specify the CSS properties to add the effect

  • Specifies the duration of the effect.

CSS3 transition CSS3 transition CSS3 transition CSS3 transition CSS3 transition

Transition effect applied to width properties for 2 seconds:

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

Note: If the term is not specified, transition will have no effect because the default value is 0.

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

CSS3 transition CSS3 transition CSS3 transition CSS3 transition CSS3 transition

Specifies that when the mouse pointer hovers (:hover) on the element:

div:hover
{
width:300px;
}

Try it out . . .

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


Multiple changes

To add a transformation effect for multiple styles, the added properties are separated by commas:

CSS3 transition CSS3 transition CSS3 transition CSS3 transition CSS3 transition

Added width, height, and conversion effects:

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

Try it out . . .



The transition property

The following table lists all the transition properties:

Property Describe Css
transition A short-case property that sets four transition properties in one property. 3
transition-property Specifies the name of the CSS property to which the transition is applied. 3
transition-duration Define how long the transition takes. The default is 0. 3
transition-timing-function A time curve that specifies the transition effect. The default is "ease". 3
transition-delay Specify when the transition effect will begin. The default is 0. 3

The following two examples set all transition properties:

CSS3 transition CSS3 transition CSS3 transition CSS3 transition CSS3 transition

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;
}

Try it out . . .
CSS3 transition CSS3 transition CSS3 transition CSS3 transition CSS3 transition

The transition effect is the same as in the example above, but uses the short transition property:

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

Try it out . . .

If you still don't know much about the CSS3 transition, we recommend that you do more practice by "try it out" above.