CSS

transition

Property

Example

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:

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

Browser Support

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-

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

More Examples

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 »

Related Pages

CSS tutorial: CSS Transitions

HTML DOM reference: transition property