CSS transitions are used to create smooth, gradual animations between two states of an element, drastically enhancing interactivity and user experience on your webpage.
:hover or :focus) or JavaScript to trigger these transitions.transition-property, transition-duration, transition-timing-function, and transition-delay.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 100px;
background-color: navy;
color: white;
text-align: center;
line-height: 100px;
font-family: sans-serif;
font-weight: bold;
border-radius: 8px;
/* Apply transition to the background-color over 0.5 seconds */
transition: background-color 0.5s;
}
.box:hover {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<div class="box">Hover Me!</div>
</body>
</html>
In the example above:
.box class defines a <div> with a navy background and a transition effect strictly for the background-color property over 0.5 seconds.<div>, the :hover pseudo-class changes the background color to lightblue, triggering the smooth transition rather than snapping instantly.To fully control an animation, CSS breaks transitions down into four specific properties. Let's explore each one.
This property specifies exactly which CSS properties you want to animate during the state change. If a property is not listed here, it will change instantly.
Syntax:
element {
transition-property: none | all | property | property1, property2;
}
none: No property will transition.all: (Default) Every animatable property will transition smoothly.width) or a comma-separated list (like width, background-color).
<!DOCTYPE html>
<html>
<head>
<style>
.width-box {
width: 100px;
height: 50px;
background-color: navy;
color: white;
padding: 10px;
/* Animate ONLY the width */
transition-property: width;
transition-duration: 0.5s;
}
.width-box:hover {
width: 300px;
background-color: lightcoral; /* This will snap instantly! */
}
</style>
</head>
<body>
<div class="width-box">Hover Me!</div>
</body>
</html>
This property determines how long it will take to complete the transition from the old state to the new state. Without a duration, the transition will happen instantly (0s).
Syntax:
element {
transition-duration: time;
}
s) or milliseconds (ms). For example, 0.5s or 500ms.
<!DOCTYPE html>
<html>
<head>
<style>
.slow-box {
width: 150px;
padding: 20px;
background-color: navy;
color: white;
text-align: center;
transition-property: background-color;
/* A very slow 2-second transition */
transition-duration: 2s;
}
.slow-box:hover {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="slow-box">Slow Hover (2s)</div>
</body>
</html>
Controls the speed curve of the transition. It defines how the animation progresses over its duration (e.g., starting fast and ending slow, or moving at a constant speed).
Syntax:
element {
transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end;
}
ease: (Default) Starts slow, speeds up, then ends slow.linear: Same speed from start to finish.ease-in: Starts slowly, then speeds up.ease-out: Starts quickly, then slows down at the end.ease-in-out: Starts and ends slowly, with a faster change in the middle.
<!DOCTYPE html>
<html>
<head>
<style>
.timing-box {
width: 100px;
padding: 15px;
background-color: navy;
color: white;
margin-bottom: 10px;
transition-property: width;
transition-duration: 2s;
}
.linear { transition-timing-function: linear; }
.ease { transition-timing-function: ease; }
.ease-in-out { transition-timing-function: ease-in-out; }
.container:hover .timing-box {
width: 400px;
}
</style>
</head>
<body>
<div class="container" style="border: 1px solid #ccc; padding: 10px;">
<p>Hover over this container to see the different speeds!</p>
<div class="timing-box linear">Linear</div>
<div class="timing-box ease">Ease</div>
<div class="timing-box ease-in-out">Ease-In-Out</div>
</div>
</body>
</html>
This property allows you to determine the amount of time to wait before the transition actually starts.
Syntax:
element {
transition-delay: time;
}
<!DOCTYPE html>
<html>
<head>
<style>
.delay-box {
width: 150px;
padding: 20px;
background-color: navy;
color: white;
text-align: center;
transition-property: background-color;
transition-duration: 0.5s;
/* Waits 1 full second before animating */
transition-delay: 1s;
}
.delay-box:hover {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<div class="delay-box">Hover & Wait (1s)</div>
</body>
</html>
Writing out four separate lines of code for a single transition can clutter your CSS file. You can combine all four properties into a single shorthand property, which simplifies the code and ensures readability.
Syntax:
element {
/* property | duration | timing-function | delay */
transition: width 0.5s ease-in-out 1s;
}
width, all).0.5s).ease-in-out).1s).
<!DOCTYPE html>
<html>
<head>
<style>
.shorthand-box {
width: 100px;
height: 100px;
background-color: navy;
color: white;
text-align: center;
line-height: 100px;
/* Shorthand: Property, Duration, Timing, Delay */
transition: width 0.5s ease-in-out 0.2s;
}
.shorthand-box:hover {
width: 250px;
}
</style>
</head>
<body>
<div class="shorthand-box">Shorthand</div>
</body>
</html>
transition: all; if you only need one or two properties to animate. Targeting specific properties improves browser performance.width, height, color, and opacity animate smoothly. Properties like display: none cannot be transitioned.Which property allows you to specify a waiting period before the CSS transition actually begins?