CSS transition Property

Description

The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. Sets the transition effect between two states of an element; they can be defined using the :hover or :active pseudo-class, or dynamically via JavaScript.

Initial value: see individual properties
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Media: Interactive
Computed value: See individual properties
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.transition

Syntax

transition: <single-transition> [ ',' <single-transition> ]*

Values

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<transition-property>See transition-property CSS property for values.
<transition-duration>See transition-duration CSS property for values.
<transition-timing-function>See transition-timing-function CSS property for values.
<transition-delay>See transition-delay CSS property for values.

Example

HTML

<div class="test">CSS transition property</div>

CSS

div {
   width: 100px; 
   height: 60px; 
   background-color: khaki; 
   color: black;
   border: 2px solid orange; 
}
div:hover {
   width: 300px;
   height: 250px; 
   background: CornflowerBlue;
}
.test {
   transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s ; 
}

Result