CSS Transitions
Creating smooth animations between CSS property changes
🎭 What are CSS Transitions?
CSS transitions allow you to change property values smoothly over a given duration. They create smooth animations when CSS properties change from one value to another.
/* Simple transition example */
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}
Output:
Transition Properties
Duration
How long the transition takes
transition-duration: 0.5s;Timing Function
Speed curve of the transition
transition-timing-function: ease;Delay
Wait time before transition starts
transition-delay: 0.2s;Property
Which CSS property to animate
transition-property: all;🔹 Basic Transition Syntax
CSS transitions enable smooth animations between state changes using the shorthand property: transition: property duration timing-function delay;. For example, transition: all 0.3s ease-in-out; animates all animatable properties. This enhances UX by providing visual feedback for hover, focus, and active states. Transitions are performant when animating opacity and transform properties, leveraging GPU acceleration. They are essential for interactive components like buttons, links, and toggles in modern web interfaces.
/* Shorthand syntax */
.element {
transition: property duration timing-function delay;
}
/* Example */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: all 0.3s ease-in-out;
}
.box:hover {
width: 200px;
background-color: lightcoral;
}Output:
🔹 Timing Functions
CSS timing functions control the acceleration curve of transitions and animations, affecting motion feel. Keywords include ease (default), linear, ease-in, ease-out, and ease-in-out. Custom Bézier curves offer precise control via cubic-bezier(). Choosing appropriate easing adds personality and realism to animations—e.g., ease-out for snappy exits, ease-in-out for smooth toggles. Proper easing improves perceived performance and user satisfaction in interactive experiences.
/* Different timing functions */
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
/* Custom cubic-bezier */
.custom { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }Output:
🔹 Multiple Property Transitions
Multiple properties can be transitioned independently with different durations, delays, and timing functions using comma-separated values: transition: opacity 0.2s ease, transform 0.4s cubic-bezier(.17,.67,.83,.67);. This allows complex, staged animations, such as fading while sliding. Managing multiple transitions enhances component expressiveness and micro-interactions. Optimize by animating only compositor-friendly properties (opacity, transform) to maintain 60fps performance and ensure smooth rendering across devices.
/* Multiple transitions */
.card {
background-color: white;
transform: scale(1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition:
background-color 0.3s ease,
transform 0.2s ease-out,
box-shadow 0.3s ease;
}
.card:hover {
background-color: #f0f8ff;
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}Output:
🔹 Practical Examples
Common transition use cases:
🔸 Button Hover Effects
.modern-button {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}Output:
🔸 Image Zoom Effect
.image-container {
overflow: hidden;
border-radius: 10px;
}
.zoom-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s ease;
}
.zoom-image:hover {
transform: scale(1.1);
}