Transitions & Micro-interactions
Learn how to bridge the gap between static states. Master timing functions, delays, and cubic-bezier curves to create professional, fluid UI motion.
Expert Answer & Key Takeaways
Learn how to bridge the gap between static states. Master timing functions, delays, and cubic-bezier curves to create professional, fluid UI motion.
1. The 4 Transition Pillars
A transition allows you to change property values smoothly (from one value to another) over a given duration. Without a transition, the change is instant and 'robot-like'.
The Example: The Professional Hover
.button {
background: blue;
transform: scale(1);
/* property | duration | timing-function | delay */
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.button:hover {
background: darkblue;
transform: scale(1.1);
}| Property | Description | Common Values |
|---|---|---|
transition-property | Which CSS rule should animate? | all, transform, opacity |
transition-duration | How long should it take? | 0.3s, 500ms |
transition-timing | The 'speed' of the movement. | ease, linear, cubic-bezier() |
transition-delay | How long to wait before starting? | 0.1s, 200ms |
[!IMPORTANT] The Performance Rule: Prefer transitioningtransformandopacity. They are GPU-accelerated. Transitioning properties likewidth,height, ormargintriggers a 'Reflow' in the browser, which can cause lag.
2. Mastering Timing Functions
The
transition-timing-function is what gives an animation its 'character'.linear: Same speed from start to end (looks robotic).ease: Starts slow, speeds up, then ends slow (the natural default).ease-in-out: Starts and ends very slow, fast in middle (good for long movements).cubic-bezier(): A custom curve that allows you to create bounces or spring effects.
Tools for Mastery:
Web designers often use tools like cubic-bezier.com to find the perfect curve for their brand.
3. Sequential (Staggered) Animations
By giving each element in a list a slightly longer
transition-delay, you can create a beautiful 'cascading' effect..li:nth-child(1) { transition-delay: 0.1s; }
.li:nth-child(2) { transition-delay: 0.2s; }
.li:nth-child(3) { transition-delay: 0.3s; }🎯 Practice Challenge: The Bounce Toggle
- Create a
divthat represents a switch or toggle. - Task 1: Use
transition: transform 0.4sto move the inner knob when clicked. - Task 2: Use a custom
cubic-bezier(0.68, -0.55, 0.265, 1.55)to make the knob 'bounce' slightly at the end of its movement. - Task 3: Observe how much more 'interactive' and 'organic' the movement feels compared to a simple linear transition.
4. Senior Interview Corner
Q: What is the difference between CSS Transitions and CSS Animations?
A: Transitions move between two states (e.g., normal and hover). They require a trigger to start. Animations (@keyframes) can have infinite states (0%, 25%, 50%, etc.) and can start automatically on page load or loop forever without interaction.
Q: Why should you avoid
transition: all?A: While convenient,
all tells the browser to monitor EVERY CSS property for changes. This increases the CPU overhead. In complex layouts, it's better to be explicit: transition: transform 0.3s, opacity 0.3s;. This improves performance and prevents unwanted transitions on properties like colors if you only meant to animate position.Top Interview Questions
?Interview Question
Q:Which timing function provides the same speed from start to end?
A:
linear
?Interview Question
Q:How do you create a sequential (staggered) animation for multiple items?
A:
Using transition-delay with increasing values
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.