The transition CSS property is a shorthand property for the following properties:
The transition property is one of the CSS3 properties.
The transition-duration should be specified first because, by default, it will be 0s and the property will not have an effect.
The properties are separated by commas.
Watch a video course
CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
If more than one transition is specified and any of the transitions have "none" as the transition-property, then the declaration is not valid.
The transition properties allow specifying the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or with the help of JavaScript.
For maximum browsers compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz-
for Firefox, -o- for older versions of Opera are used with this property.
Initial Value | all 0s ease 0s |
Applies to | All elements, ::before and ::after pseudo-elements. |
Inherited | No. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | Object.style.transition = "all 3s"; |
Syntax
transition: transition-property | transition-duration | transition-timing-function | transition-delay | initial | inherit;
Example of the transition property with the :active pseudo class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #8ebf42;
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
}
div:active {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<p>Click and hold to see the transition effect.</p>
<div></div>
</body>
</html>
Example of the transition property with the :hover pseudo class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.element {
padding: 20px;
width: 50px;
height: 50px;
left: 0;
background-color: #8ebf42;
position: relative;
-webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
-moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
-o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}
.example:hover .element {
left: 400px;
background-color: #1c87c9;
}
.element-2 {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<div class="example">
<p>Hover over the container to see the transition effect.</p>
<div class="element element-1"></div>
<p>No transition:</p>
<div class="element element-2"></div>
</div>
</body>
</html>
Values
Value | Description |
---|---|
transition-property | Specifies the names of the properties for the transition. |
transition-duration | Specifies the duration of the transition animation. |
transition-timing-function | Specifies the speed over time of an object being transitioned from one value to another. |
transition-delay | Specifies the amount of time to wait before a transition effect is animated. |
initial | Makes the property use its default value. |
inherit | Inherits the property from its parents element. |
Browser support
26.0+ 1.0 -webkit- |
12.0+ |
16.0+ 4.0 -moz- 49.0 -webkit- |
6.1+ 3.0 -webkit- |
12.1+ 15.0 -webkit- |
Practice Your Knowledge
What properties of CSS Transition can be changed?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.