CSS transition attribute
- Previous page transform-style
- Next page transition-delay
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; }
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- |
- Previous page transform-style
- Next page transition-delay