CSS3 transition Property


Example

Hover over a div element and gradually change the width of the table from 100px to 300px:

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

Try it Yourself »

Browser Support

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

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

Property
transition 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

Attribute definition and usage instructions

The transition property allows you to control transition effects when an element's state changes. It lets you create smooth transitions when an element changes from one style to another, such as from one color to another, or from hidden to visible.

This attribute contains four values:

  • transition-property: Specifies the name of the CSS property to transition. For example,color、background-coloretc.

  • transition-duration: Specifies the duration of the transition effect, in seconds or milliseconds.

  • transition-timing-function: Specifies the speed curve of the transition effect. It can belinear(linear),ease(Fade in and fade out),ease-in(fade-in),ease-out(fade-out),ease-in-out(fade in first, then fade out) and so on.

  • transition-delay: Specifies the delay time before the transition effect begins, in seconds or milliseconds.

Example

/* Apply transition effects to all properties */
.element {
  transition: all 0.3s ease;
}

/* Apply a transition effect to the specified property (color) */
.element {
  transition: color 0.3s ease-in-out;
}
Default value: all 0 ease 0
Inherited: no
version: CSS3
JavaScript Syntax: object.style.transition="width 2s"

Syntax

transition: property duration timing-function delay;

Value Description
transition-property Specify the CSS property name, transition effect
transition-duration The transition effect needs to specify how many seconds or milliseconds it takes to complete.
transition-timing-function Specifies the speed curve of the transition effect.
transition-delay Defines when the transition effect begins.
other extensions