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

More "Try it Yourself" examples below.

Definition and Usage

The transition property is a shorthand property for:

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

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

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

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

HTML DOM reference: transition property