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

• <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

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

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 ; 
}

Browser Support

Desktop
10	12	26	16	12.1	9
Tablets / Mobile
4.4	26	16	12.1	9	1.5

Last updated by CSSPortal on: 2nd November 2019