CSS transitions allow state changes—such as hover color changes, transforms, or opacity fades—to animate smoothly over a specified duration rather than snapping instantly.
Transitions can be declared using individual properties or the transition shorthand:
/* Shorthand declaration: property duration timing-function delay */
.button {
background-color: #2563eb;
transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}
.button:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
}
Transition parameters:
transition-property: The CSS property to animate (all, background-color, transform, opacity).transition-duration: The animation time duration (0.3s, 300ms).transition-timing-function: Acceleration curve (ease, linear, ease-in, ease-out, cubic-bezier(...)).transition-delay: Waiting time before starting the transition (0.1s).flowchart TD
A["transition-timing-function"] --> B["ease (Starts slow, speeds up, ends slow)"]
A --> C["linear (Constant speed throughout duration)"]
A --> D["ease-out (Starts fast, decelerates to smooth stop)"]
A --> E["cubic-bezier(...) (Custom mathematical acceleration curve)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Transitions Demonstration</title>
<style>
.transition-btn {
background-color: #1e293b;
color: #38bdf8;
border: 2px solid #38bdf8;
padding: 12px 24px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-btn:hover {
background-color: #38bdf8;
color: #0f172a;
box-shadow: 0 10px 15px -3px rgba(56, 189, 248, 0.4);
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>Smooth Button Transition</h2>
<button class="transition-btn">Hover for Smooth Transition</button>
</body>
</html>
transition: transform 0.3s ease, opacity 0.3s ease; instead of transition: all 0.3s ease for optimal performance.transform and opacity for smooth 60fps UI animations; avoid animating width, height, or margin.Create a CSS class .card that animates transform and opacity over 0.3s ease!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.