Use @keyframes when an element needs more than a simple two-state transition. Keep motion purposeful and preserve a usable final state without animation.
Build a Complete Mental Model
CSS animations define intermediate states with `@keyframes` and control the timeline through duration, timing, delay, iteration, direction, and fill mode. Motion should clarify feedback or relationships; never hide essential content until an animation completes, and provide a `prefers-reduced-motion` fallback.
Apply It in Real CSS
Animate a loading indicator or notification entrance with transform and opacity, then show the final static state immediately under reduced motion.
After This Lesson
.notice {
animation: notice-in 240ms ease-out both;
}
@keyframes notice-in {
from {
opacity: 0;
transform: translateY(0.75rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.notice { animation: none; }
}The notice enters gently; reduced-motion users see it immediately without animation.Try It Yourself
Animate a loading indicator or notification entrance with transform and opacity, then show the final static state immediately under reduced motion.
Common Failure Mode
Unbounded decorative loops, large movement, and animated layout properties can create performance and motion-sensitivity problems.
CSS reference — MDN Web Docs