CSS transition Property

Description

The transition CSS property is a fundamental tool for creating smooth and visually pleasing animations and transitions in web design. It allows you to specify how a particular CSS property should change over time when triggered by events like hovering, clicking, or state changes. By defining properties such as duration, timing function, delay, and the specific property to be animated, developers can achieve seamless transformations in elements, making user interactions more engaging and intuitive. Whether it's a simple fade-in effect or a complex transformation, the transition property enhances the user experience by providing a sense of continuity and responsiveness in web interfaces. Individual properties are: transition-property, transition-duration, transition-timing-function, and transition-delay.

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

Interactive Demo

transition: margin-right 1s;

transition: margin-right 2s .5s;

transition: margin-right 2s ease-in-out;

transition: margin-right 2s ease-in-out .5s;

transition: margin-right 2s, color 0s 3s, background-color 0s 2s;

transition: all 1s ease-out;

Hover over me
to see 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

Editor