Detailed explanation
CSS keyframe animations describe how an element’s styles change over time without requiring JavaScript to update every frame. An @keyframes rule defines a named sequence of stages using percentages, where 0% is the beginning and 100% is the end; from and to are equivalent keywords. Intermediate stages such as 25% or 60% let you build multi-step effects. Unlike transitions, which animate a change between property values, animations can start when their styles apply, repeat automatically, and follow an explicitly defined sequence.
To run a sequence, apply animation-name and animation-duration to an element, usually through the animation shorthand. For example, @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } combined with .loader { animation: spin 1s linear infinite; } produces continuous rotation. Here, spin selects the sequence, 1s sets the duration of each cycle, linear maintains a constant rotation rate, and infinite repeats it indefinitely. The default duration is 0s, so omitting duration usually means there is no visible movement.
The browser calculates animation progress and derives property values between keyframes according to each property’s interpolation rules. The timing function controls progress between keyframe stages; ease accelerates and decelerates, while steps() creates stepped changes. Not every property supports smooth interpolation. If a property lacks a starting or ending keyframe value, the browser can use its underlying computed value. animation-delay controls when playback begins, animation-direction can reverse or alternate cycles, and animation-play-state pauses or resumes playback. animation-fill-mode controls whether relevant keyframe styles apply during a delay or after completion; forwards does not permanently rewrite the element’s base styles.
In interviews, demonstrate both syntax and practical judgement. Prefer transform and opacity for movement and fading because browsers can often animate them through compositing, whereas width or top may trigger layout work. This is an optimisation opportunity, not a guarantee of smooth rendering. Also respect prefers-reduced-motion by removing or simplifying non-essential motion. A strong answer explains the timeline, identifies each shorthand value, and distinguishes animation playback from the underlying CSS state.
Key points to remember
- @keyframes defines named stages using percentages or from/to markers.
- An element selects the sequence with animation-name and needs a non-zero duration for visible progression.
- Timing functions control interpolation; iteration-count and direction control repeated playback.
- Delay, fill-mode, and play-state govern start timing, out-of-playback styles, and pausing.
- Prefer transform and opacity where appropriate, and accommodate reduced-motion preferences.
Common mistakes candidates make
- Defining @keyframes but forgetting to apply the animation or specify a non-zero duration.
- Assuming animation-fill-mode: forwards permanently changes the element’s underlying CSS.
- Animating layout-heavy properties unnecessarily or ignoring users’ reduced-motion preferences.
Likely follow-up questions
When should you use an animation instead of a transition?
Use a transition for a property change between states, such as a button changing colour on hover. Use a keyframe animation for explicit intermediate stages, automatic repetition, or a sequence that runs without a separate state change.
What is the difference between animation-direction and animation-fill-mode?
Direction determines whether cycles play forwards, backwards, or alternate. Fill-mode determines whether relevant keyframe styles apply before active playback or after completion; it does not control playback direction.
Can multiple animations run on the same element?
Yes, provide comma-separated animation definitions, such as animation: spin 1s linear infinite, fade 2s ease-in-out infinite alternate. If both affect the same property, the default replacement behaviour generally lets the later animation in the list take precedence for that property.
Interview tip: Walk through the spin example value by value, then explain interpolation, fill-mode, and one performance or accessibility consideration.