CSS transitions enable smooth changes in the CSS property values over the specified duration. For example,
div {
background-color: orange;
transition: background-color 1s linear;
}
div:hover {
background-color: red;
}
Browser Output
Hover over the element below
Here, the transition property smoothly changes the background
color from orange to red.
CSS Transition Properties
CSS transition includes the following properties:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition (shorthand property)
Let's look at each of these properties in detail.
CSS transition-property
The transition-property specifies the CSS properties to which a
transition should be applied.
The syntax of the transition-property property is,
transition-property: none | all | property-name
Here,
none: no properties will transitionall: all properties will transition-
property-name: specifies the CSS properties for the transition
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition-property</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box"></div>
</body>
</html>
div.box {
width: 100px;
height: 100px;
background-color: orange;
/* specifies width for the transition */
transition-property: width;
transition-duration: 1s;
}
/* styles while hovering element*/
.box:hover {
width: 200px;
}
Browser Output
Hover over the element below
In the above example,
transition-property: width
transitions the width property smoothly from
100px to 200px.
Note: The default value of transition-duration is
0s, so its value must be specified to see the effect of
transition.
CSS transition-duration Property
The transition-duration property specifies the time for the
completion of the transition.
The syntax of the transition-duration property is:
transition-duration: time-value
The time-value represents the duration of the transition in
seconds(s) or milliseconds(ms).
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition-duration</title>
</head>
<body>
<p>Hover over the element below </p>
<div class="box"></div>
</body>
</html>
div.box {
width: 100px;
height: 100px;
background-color: orange;
transition-property: background-color;
/* specifies the duration for transition to complete */
transition-duration: 1s;
}
/* styles while hovering element*/
.box:hover {
background-color: red;
}
Browser Output
Hover over the element below
In the above example,
transition-duration: 1s
specifies that the background color transition lasts for
1 second.
CSS transition-timing-function Property
The transition-timing-function property defines how transition
properties change during a transition.
The syntax of the transition-timing-function property is:
transition-timing-function: timing-function
Here, timing-function represents any of the following values:
-
ease: transition starts slowly, accelerates at the middle, and slowly ends -
linear: specifies the constant transition speed throughout the duration -
ease-in: specifies the transition with a slow start and fast end -
ease-out: specifies the transition with a fast start and slow end -
ease-in-out: specifies the transition with a slow start and end -
step-start: specifies the transition with an instant beginning that remains constant throughout the end -
step-end: specifies the transition with a constant beginning that ends instantly -
steps(int, start | end): represents transition with stepped timing function and defined interval -
cubic-bezier: defines a custom transition with specified values
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box box1">Ease</div>
<div class="box box2">Linear</div>
<div class="box box3">Ease-In</div>
<div class="box box4">Ease-Out</div>
<div class="box box5">Ease-In-Out</div>
<div class="box box6">Step-start</div>
<div class="box box7">Step-end</div>
<div class="box box8">Steps(5,end)</div>
<div class="box box9">Cubic-bezier</div>
</body>
</html>
.box {
width: 100px;
height: 100px;
text-align: center;
margin-bottom: 12px;
background-color: orange;
transition-property: width;
transition-duration: 1s;
}
/* Different timing functions for each box */
.box1 {
transition-timing-function: ease;
}
.box2 {
transition-timing-function: linear;
}
.box3 {
transition-timing-function: ease-in;
}
.box4 {
transition-timing-function: ease-out;
}
.box5 {
transition-timing-function: ease-in-out;
}
.box6 {
transition-timing-function: step-start;
}
.box7 {
transition-timing-function: step-end;
}
.box8 {
transition-timing-function: steps(5, end);
}
.box9 {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* styles while hovering elements */
.box:hover {
width: 500px;
}
Browser Output
Hover over the element below
In the above example, different transition timing functions change the
width property from 100px to
90% width of container.
Note: The transition-timing-function is also
known as an easing function.
CSS transition-delay Property
The transition-delay property specifies the time duration for a
transition to start.
The syntax of the transition-delay property is:
transition-delay: time_value
The time_value represents the duration for a transition to
start in seconds(s) or milliseconds(ms).
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition-delay</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box"></div>
</body>
</html>
div.box {
width: 100px;
height: 100px;
background-color: orange;
transition-property: background-color;
/* delays the transition by 1s */
transition-delay: 1s;
}
/* styles while hovering element */
.box:hover {
background-color: red;
}
Browser Output
Hover over the element below
In the above example,
transition-delay: 1s;
delays the transition by 1 second before changing the
background color from orange to red.
Note: The negative time value creates the illusion that the transition started before any trigger event occurred. However, it still begins immediately upon the trigger event.
CSS transition Property
The transition is a shorthand property to specify
transition property, transition-duration,
transition-timing-function, and
transition-delay properties.
The syntax of the transition property is:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
Let's see an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS transition property</title>
</head>
<body>
<p>Hover over the element below</p>
<div class="box"></div>
</body>
</html>
div.box {
width: 100px;
height: 100px;
background-color: orange;
transition: width 2s linear 1s;
}
/* styles while hovering element */
.box:hover {
width: 200px;
}
Browser Output
Hover over the element below
In the above example,
transition: width 2s linear 1s;
is equivalent to,
transition-property: width;
transition-duration: 2 seconds;
transition-timing-function: linear;
transition-delay : 1 second;
Note: The order of property values within the
transition property is important.