Q18: What is the difference between CSS Transitions and CSS Keyframe Animations?
- Transitions: Smoothly interpolate property changes between two states (e.g., initial to
:hover). Require an explicit state trigger. - Animations (@keyframes): Complex multi-step state sequences running automatically on page load or trigger, supporting infinite loops and keyframe steps.
Transition vs Keyframe Animation
/* Transition on hover */
.btn {
transition: transform 0.2s ease;
}
.btn:hover { transform: scale(1.05); }
/* Keyframe loop animation */
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.spinner {
animation: pulse 1.5s infinite;
}💡 Transitions react to hover interactions; keyframe animations run autonomous loops.
Key Takeaways
- Transitions interpolate state changes between 2 points (A → B).
- Animations (@keyframes) execute multi-step keyframe sequences.
Knowledge Check
Which feature allows setting intermediate animation states at 25%, 50%, and 75% intervals?