CSS3 `transition` Property

Example

Hover the mouse over a div element to gradually change the width of the table from 100px to 300px:

div {
    width: 100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover { width: 300px; }

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

The numbers preceding -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
transition	26.0 <br>4.0 -webkit-	10.0	16.0 <br>4.0 -moz-	6.1 <br>3.1 -webkit-	12.1 <br>10.5 -o-

The transition property sets the transition effect for an element and is a shorthand for the following properties:

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

Default value:	all 0 ease 0
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	`object.style.transition="width 2s"`
---	---

Value	Description
transition-property	Specifies the name of the CSS property, the transition effect 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 starts