CSS Transition Speed Curve
The transition-timing-function property sets the speed curve of a transition effect.
It can have one of these values:
ease- starts slow, goes fast, then ends slow (this is the default)linear- keeps the same speed from start to endease-in- starts slowease-out- ends slowease-in-out- has a slow start and a slow endcubic-bezier(n,n,n,n)- lets you set your own values in a cubic-bezier function
Example
Different speed curves for the transition:
Prompt
Create a page with five div elements that grow wider on hover, each using a different transition-timing-function value: linear, ease, ease-in, ease-out, and ease-in-out. Label each div with the name of its timing function.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Speed Curves</title>
<style>
div.box {
width: 100px;
height: 100px;
background-color: red;
color: white;
font-weight: bold;
line-height: 100px;
text-align: center;
margin-bottom: 10px;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div.box {
transition: width 2s;
}
div.box:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Transition Speed Curves</h1>
<p>Hover over the div elements below to see the different speed curves:</p>
<div id="div1" class="box">linear</div>
<div id="div2" class="box">ease</div>
<div id="div3" class="box">ease-in</div>
<div id="div4" class="box">ease-out</div>
<div id="div5" class="box">ease-in-out</div>
</body>
</html>
CSS Transition Delay
The transition-delay property sets a delay before the transition starts.
The value is set in seconds (s) or milliseconds (ms).
Example
Add a 1 second delay before the transition starts:
Prompt
Create a page with a div that changes width on hover, using a CSS transition with a 1 second delay before starting.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Delay</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Transition Delay</h1>
<p>Hover over the div element below. The transition will start after a 1 second delay:</p>
<div></div>
</body>
</html>
Transition + Transform
Div transition with transform
This example combines transition and transform on a <div> element:
Prompt
Create a page with a div that transitions its width, height, background-color, and transform (rotate) on hover using a 2 second duration for each property.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition + Transform (Div)</title>
<style>
div.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
div.box:hover {
width: 200px;
height: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element to see a transition combined with a transform:</p>
<div class="box"></div>
</body>
</html>
Button transition with transform
This example combines transition and transform on a button:
Prompt
Create a page with a button that transitions its background-color and transform (scale) on hover using ease-out timing over 1 second.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Transition + Transform</title>
<style>
button {
padding: 15px 30px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 1s ease-out, transform 1s ease-out;
}
button:hover {
background-color: #45a049;
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Button Transition + Transform</h1>
<p>Hover over the button to see a transition combined with a transform:</p>
<button>Hover Me</button>
</body>
</html>
More Transition Examples
The CSS transition properties can be written one by one, or by using the shorthand transition property.
Individual properties
Setting each transition property separately:
Prompt
Create a page with a div that grows wider on hover, using the individual transition properties: transition-property set to width, transition-duration set to 2s, transition-timing-function set to linear, and transition-delay set to 1s.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Individual Transition Properties</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Individual Transition Properties</h1>
<p>Hover over the div element below (there is a 1 second delay before the transition starts):</p>
<div></div>
</body>
</html>
Shorthand property
Using the shorthand transition property:
Prompt
Create a page with a div that grows wider on hover, using the shorthand transition property: width 2s linear 1s.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shorthand Transition</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Shorthand Transition</h1>
<p>Hover over the div element below (there is a 1 second delay before the transition starts):</p>
<div></div>
</body>
</html>