The transition property creates animations.
It does this by changing property values over a period of time.
transition is a shorthand for several other transition properties.
An element with a transition.
Hovering over the rectangle will animate it into a circle.
<style>
.transition {
width: 150px;
height: 150px;
background-color: orangered;
cursor: pointer;
transition: border-radius 500ms ease;
}
.transition:hover {
border-radius: 50%;
}
</style>
<div class="transition"></div>
The transition property creates CSS animations.
The transition is a shorthand for these properties:
Transitions occur when a property value changes from one value to another.
This will create an step-wise animation over a specified time span.
If no transition-property is provided, the transition will be applied to all animatable properties.
transition: property duration timing-function delay |
initial | inherit;
| Value | Description |
|---|---|
| transition-property | Transition property name |
| transition-duration | Time (seconds or milliseconds) the transition takes to complete |
| transition-timing-function | The easing function for the transition |
| transition-delay | Delay (seconds or milliseconds) before the transition starts |
initial |
Sets the value to its default value. |
inherit |
Inherits the property from its parent element. |
Hovering over this element starts an animation of the width.
<style>
.transition-width {
width: 100px;
height: 100px;
background-color: blueviolet;
cursor: pointer;
transition: width 1s;
}
.transition-width:hover {
width: 350px;
}
</style>
<div class="transition-width"></div>
The transition property does not work with the display property.
If you want to show or hide elements, use either visibility or opacity.
This table shows when transition support started for each browser.
 Chrome
|
26.0 | Mar 2013 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
6.1 | Jun 2013 |
