1Infinite Loops & Performance
Combine keyframes with 'animation-iteration-count: infinite' to create background patterns, loaders, and ambient effects. For optimal performance, animate only 'transform' and 'opacity' properties to ensure hardware-accelerated rendering by the GPU, preventing layout thrashing.
2Step-by-Step Breakdown
Timeline Execution Base. While CSS Transitions are great for simple, one-off interactions, they are severely limited in complexity. Enter @keyframes. This rule is a full-fledged animation sequencer. It allows you to define a timeline, orchestrate multiple properties simultaneously, and script complex, multi-step visual physics that can execute automatically without any JavaScript triggers. You are now directing motion.
The @keyframes Syntax. You declare a timeline using the '@keyframes' identifier followed by a custom name (e.g., 'slide'). Inside this block, you define the states of your element over time. The most basic timeline uses the 'from' and 'to' keywords, which act as semantic aliases for the beginning and the end of the animation sequence.
Understanding the syntactic foundation is crucial for engineering motion. Which CSS at-rule is specifically utilized to define the timeline and intermediate states of an animation sequence?
- →@animate
- →@keyframes
Understanding Aliases. The keywords 'from' and 'to' are simply syntactic sugar provided by the CSS parser. They are identical to writing '0%' and '100%'. By understanding this, you realize that an animation is just a mathematical progression from 0 to 100 over a specified duration of time.
The CSS engine interprets these aliases as fixed mathematical points on the timeline. In an @keyframes block, what exact percentage is the from keyword functionally equivalent to?
- →0%
- →100%
Granular Control: Percentage Markers. The true power of @keyframes is unlocked when you drop the aliases and use percentage markers. You can define as many granular waypoints as you need: 10%, 25%, 33.3%, 50%, etc. This allows you to engineer complex sequences, like a realistic heartbeat or a ball bouncing with decaying momentum.
Percentage markers allow for surgical precision when scripting motion graphics. If you need an animation to pause or execute a specific style exactly halfway through its timeline, which percentage would you target?
- →0%
- →50%
- →100%
Multi-Property Orchestration. At any given waypoint, you are not restricted to animating a single property. You can animate multiple properties simultaneously. You can scale an element up, change its background color, and fade its opacity all at the exact same 50% marker, creating highly orchestrated visual effects.
True or False: The @keyframes architecture explicitly limits you to animating only one CSS property (e.g., just opacity) per percentage waypoint to prevent engine overload.
- →True
- →False
Reusability & Assignment. Defining the @keyframes block is only step one; it does nothing on its own. You must 'assign' the timeline to an HTML element using the 'animation' property. Because @keyframes are defined globally, you can assign the exact same 'expand' timeline to ten different elements, giving them all different durations and delays.
Once a timeline is successfully defined using @keyframes, which specific CSS property must be declared on the target element to execute the sequence?
- →transition
- →animation
Execution: High-Fidelity Physics. Observe the execution. By mapping precise transform coordinates across a percentage-based timeline, and leveraging the infinite iteration property, we have created a perpetual, hardware-accelerated motion loop. This transforms static HTML into a dynamic, engaging interface.
Timeline Sequenced. You have conquered the Timeline! You now understand how to define complex animation sequences using @keyframes, engineer precise waypoints utilizing percentages, and orchestrate multiple properties simultaneously. You realize that timelines are globally reusable assets that must be explicitly assigned via the 'animation' property. With motion mechanics locked in, it's time to explore complex aesthetic enhancements. Next: Advanced Visual Effects.
Attach A Keyframe Animation. animation-name connects an element to a @keyframes block by name.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Always Respect prefers-reduced-motion for Non-Essential @keyframes Animations
Infinite loops, parallax effects, and large-motion transforms can trigger vestibular disorders, nausea, or seizures in sensitive users. Wrap decorative animations in `@media (prefers-reduced-motion: reduce)` and disable or drastically simplify them when that media feature is set.
@media (prefers-reduced-motion: reduce) {
.floating-element {
animation: none;
}
}2Infinite Animations Can Trap Keyboard Focus Visually Even When Focus Logic Is Fine
A perpetually pulsing or shifting element near a focused control can make the actual focus outline hard to visually track for users with low vision or attention-related disabilities — keep animated elements visually separated from interactive, focusable controls.
SEO Implications
- 1
Animating Layout Properties Instead of transform/opacity Triggers Reflow and Hurts INP/CLS
Keyframes that animate `width`, `top`, `left`, or `margin` force the browser to recompute layout on every frame, which is far more expensive than compositor-only properties (`transform`, `opacity`) and can directly worsen Interaction to Next Paint and Cumulative Layout Shift scores.
- 2
Infinite Animations Left Running Off-Screen Waste Battery and CPU, Indirectly Hurting Engagement Metrics
A decorative @keyframes loop that keeps running even when its element scrolls out of view burns CPU/GPU cycles unnecessarily; pairing it with an Intersection Observer to pause off-screen animations improves battery life and perceived performance, both of which correlate with better on-page engagement signals.
Best Practices
Animate Only transform and opacity Whenever Possible for Smooth, GPU-Accelerated Motion
These two properties can be composited by the GPU without triggering a full layout recalculation, keeping animations at a consistent 60fps even on lower-powered devices, unlike animating box-model properties like width or margin.
Always Pair Decorative or Looping Animations With a prefers-reduced-motion Override
Treat reduced-motion support as a required deliverable, not an optional nice-to-have — it's a straightforward media query that meaningfully protects users with vestibular and seizure-related conditions from real physical discomfort.
Frequent Bugs
An element animated with @keyframes snaps back to its original position the instant the animation completes.
Add `animation-fill-mode: forwards;` so the element retains the computed styles of its final keyframe (100%) after the animation ends, instead of reverting to its pre-animation CSS state.
A CSS animation looks janky or drops frames, especially on mobile devices.
Check whether the keyframes animate layout-triggering properties like `width`, `top`, or `margin` instead of `transform`/`opacity` — switching to transform-based equivalents (e.g. `transform: translateX()` instead of animating `left`) restores smooth, GPU-composited motion.
Real-World Examples
Building an Accessible Loading Spinner That Respects Reduced Motion
A UI needed an infinitely spinning loading indicator, but the team wanted to avoid triggering discomfort for vestibular-sensitive users while a request was pending. The spinner used only `transform: rotate()` for GPU-friendly performance, and a reduced-motion media query swapped it for a simple pulsing opacity instead of a spin.
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: pulse-opacity 1.5s ease-in-out infinite;
}
}