CSS Keyframe Animations: Multi-Step Motion Control
Think of CSS keyframes as a flipbook for your UI. You define styles at specific moments, and the browser animates between them. It's for multi-stage sequences, like loading spinners, where simple transitions fall short.
Why it exists
CSS transition is great for simple A-to-B state changes, like a hover effect, but it can't handle more complex sequences. Keyframes were created to define multi-step animations with intermediate states, like a bounce or a pulse, directly in CSS without needing JavaScript.
The mental model
A keyframe animation is like a director telling an actor where to be at specific points in a scene. You define the styles at key moments (e.g., at 0%, 25%, and 100% of the timeline), and the browser handles the smooth motion between these 'waypoints.' You specify the 'what' and 'when,' and the browser figures out the 'how.'
How it works
First, you declare an animation sequence using the @keyframes at-rule and give it a unique name, like @keyframes slide-in. Inside this rule, you define blocks for specific percentages along the animation's duration. For example, 0% { opacity: 0; transform: translateX(-100%); } and 100% { opacity: 1; transform: translateX(0); }. The keywords from and to are just shortcuts for 0% and 100%. Then, you apply this animation to an element using the animation-name property, along with other properties like animation-duration and animation-iteration-count.
When to use it
Use keyframes for any animation that has more than two states. This is perfect for loading spinners, attention-grabbing pulses, multi-part slide-in/fade-in sequences, or any choreographed motion. It provides the granular control that CSS transitions lack. If a property isn't specified in every keyframe, the browser will attempt to interpolate it between the defined points.
When not to use it
For simple, two-state animations triggered by a state change (like a link changing color on hover), a CSS transition is simpler and more direct. Keyframes are overkill for a basic fade. Also, for highly interactive or physics-based animations where motion depends on user input in real-time, a JavaScript-based animation library often provides more power and flexibility.
One canonical example
A common footgun is forgetting to define the start or end states. If you define a keyframe animation with only a 50% state, the browser will use the element's existing, non-animated styles for the 0% and 100% states. This can be useful for animating an element from its initial state and back, but if you expected it to start from a different state, it will cause a visual jump at the beginning and end of the animation.
Interview question
Which scenario best demonstrates the necessity of using CSS keyframe animations over CSS transitions?
- a.Animating a navigation bar to smoothly change its height when scrolled past a certain point.
- b.Creating a loading spinner that continuously rotates and changes color through several distinct hues.Correct
- c.Fading out a modal window when the user clicks an "X" button.
- d.Making an image grow slightly larger and then shrink back to its original size when hovered over.
Why? this is the answer
Keyframe animations are designed for multi-step sequences with intermediate states, such as a loading spinner with continuous rotation and color changes. Simple CSS transitions are limited to animating between two distinct states.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #animation
- #front-end
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles