- Description
Transition is all about what happens when a property changes form one value to another. How long it takes and what timing function is used.
Transition is a shorthand rule for:- transition-property which specifies what property you are changing.
- transition-duration the length of time the transition takes.
- transition-timing-function the timing function used eg. ease, linear.
- transition-delay when the transition will start.
For transition to work you must target the element with a selector and specify the properties and duration. You also need to change the value of the property after an event such as hover.
multiple properties, separated by a comma can be transitioned. eg.
transition: width 2s linear, background-color 2s ease-in;Pseudo classes that can be used to trigger transition: :link, :visited, :hover, :active, :focus.
See also:
- Live Example
- Play with the code in the textarea below.
- Values
- [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [,*]]
- Introduced in CSS version
- 3
- Applies to elements
- All
- Inherited
- No
- Browser Support
Browsers IE Firefox Safari Opera Chrome Versions 10 -moz- -webkit- -o- -webkit-
Belongs to:
See the full list CSS properties and browser support: CSS Properties
