CSS transition Property

Hover over a <div> element to gradually change the width from 100px to 300px:

div {
width: 100px;
transition: width 2s;
}div:hover {
width: 300px;
}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The transition property is a shorthand property for the four transition properties:

transition-property, transition-duration, transition-timing-function, and transition-delay.

Note: Always specify the transition-duration property, otherwise the duration is 0s, and the transition will have no effect.

Default value: all 0s ease 0s
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transition=”all 2s”Try it
CSS Syntax
transition: property duration timing-function delay|initial|inherit;
Property Values
Value Description
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Defines when the transition effect will start
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Example

When an <input type=”text”> gets focus, gradually change the width from 100px to 250px:

input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}input[type=text]:focus {
width: 250px;
}

Try it Yourself »