WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Transitions


CSS3 Transitions

In CSS3, in order to add a certain effect, we can switch from one style to another without using Flash animation or JavaScript. Mouse over the following elements:

Example:Mouse over the following elements:

CSS3

Browser Support for Transitions

The numbers in the table indicate the first browser version number that supports this attribute.

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

Property
transition 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-delay 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-duration 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-property 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-
transition-timing-function 36.0
4.0 - webkit-
13.0 10.0 16.0
4.0 - moz-
6.1
3.1 - webkit-
13.1
10.5 - o-

How does it work?

CSS3 transition is the effect of an element gradually changing from one style to another.

To achieve this, two things must be specified:

  • Specify CSS properties to add effects
  • Specify the duration of the effect.

Transition effect applied to the width attribute for 2 seconds:

Example

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

Note: If you do not specify a period, the 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:

Example

div:hover { width:300px; }

Multiple changes

To add transformation effects of multiple styles, add attributes separated by commas:

Example

div { transition: width 2s, height 2s, transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; }
Try it yourself »

Transition attributes

The following table lists all transition attributes:

Attribute Description CSS
transition Abbreviated attribute, used to set four transition attributes in one attribute. 3
transition-property Specifies the name of the CSS property to which the transition applies. 3
transition-duration Defines the time it takes for the transition effect. The default is 0. 3
transition-timing-function specifies the time curve of the transition effect. The default is "ease". 3
transition-delay Specifies when the transition effect will begin. The default is 0. 3

The following two examples set all transition properties:

The following precedent demonstrates the a portion of the diverse speed bends that can be used:

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 yourself »

Delay the Transition Effect

Same transition effect as the above example, but uses the shorthand transition attribute:

Example

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */
Try it yourself »

Transition + Transformation

The following model likewise adds a change to the progress effect:

Example

div { width:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover {width:300px;}
Try it yourself »

More Transition Examples

The CSS3 change properties can be indicated one by one, as this:

Example

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

Example

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Try it yourself »