CSS transition attribute

Definition and Usage

The transition attribute is a shorthand attribute used to set four transition properties:

Note:Always set transition-duration If the attribute is not set, no transition effect will occur if the duration is 0.

See also:

CSS Tutorial:CSS Transition

HTML DOM Reference Manual:transition attribute

Example

Place the mouse pointer over the div element, and its width will gradually change from 100px to 300px:

div {
  width: 100px;
  transition: width 2s;
}

Try it yourself

CSS Syntax

transition: property duration timing-function delay;

Attribute Value

Value Description
transition-property Specify the name of the CSS property to be set with the transition effect.
transition-duration Specify how many seconds or milliseconds are needed to complete the transition effect.
transition-timing-function Specify the speed curve of the speed effect.
transition-delay Define when the transition effect starts.

Technical Details

Default Value: all 0 ease 0
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.transition="width 2s"

Browser Support

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

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version of the prefix used.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-