Understanding the Core Difference
There’s a moment in every designer’s journey when you’re staring at a hover effect that doesn’t quite feel right. You’ve got the CSS written, but something’s off. Maybe the timing’s weird. Maybe it’s jerky. Or maybe you’re just using the wrong tool for the job.
The truth is, CSS transitions and keyframe animations are different beasts. Transitions smooth the change from one state to another—think button hover, link color shift, opacity fade. Keyframes let you define multiple steps along a journey. They’re what you reach for when you want something more complex, more choreographed, more alive.
But here’s what gets overlooked: picking the wrong one doesn’t just mean wasted time rewriting code. It means unnecessary repaints, janky animations, and worse performance. On mobile especially, this matters.
Quick definition: Transitions animate between two CSS states (start and end). Keyframes let you animate through multiple waypoints. Transitions need a trigger (hover, focus, class change). Keyframes can loop continuously or play on page load.
When Transitions Are Your Answer
Use transitions when you’ve got a clear before-and-after state. A button that changes color on hover. A sidebar that slides out when a menu opens. A card that scales up when you click it. These are transitions in their purest form.
Why? Because they’re lightweight. They require just three or four properties to define: the CSS property you’re animating, the duration, the timing function, and optionally a delay. That’s it. The browser knows exactly what you want—go from this state to that state smoothly—and it handles the in-between frames.
Performance-wise, transitions are your friend on mobile. They’re simpler to calculate. The browser doesn’t have to figure out dozens of keyframes. It just interpolates between two values. On a device with limited resources, that difference is noticeable.
- Button hover effects (background color, shadow, transform)
- Form field focus states (border color, outline glow)
- Navigation menu slides (translateX, width changes)
- Image zoom on interaction (scale transform)
- Opacity fades for overlay elements
Keyframe Animations: When You Need Choreography
Keyframes are different. You’re not animating between two states—you’re choreographing a sequence. Maybe your hero section has a floating element that drifts up and down continuously. Maybe your loading spinner needs to rotate, scale, and change color all at different times. That’s keyframes.
You define percentages: 0%, 25%, 50%, 75%, 100%. Or you use named keyframes like “from” and “to”. At each waypoint, you set different CSS values. The browser smoothly animates between each step. You can make it loop, you can control the iteration count, you can make it play backwards, you can delay it.
The catch? Keyframes are more expensive computationally. The browser has to calculate more intermediate values. On older devices or when you’ve got dozens of animations running simultaneously, this adds up. But for the right use case, it’s absolutely worth it.
Real example: A loading spinner that rotates 360 degrees continuously while the dot in the center pulses in and out. That’s two simultaneous animations, both looping. Keyframes let you coordinate these perfectly.
Performance Considerations That Matter
Here’s where it gets practical. Both transitions and keyframes animate on the GPU when you’re animating the right properties. Transform and opacity? GPU. Width and height? CPU. That’s the real performance divider, not whether you chose transitions or keyframes.
But there’s a subtlety. If you’re using keyframes on a property that triggers layout recalculation—like width or margin—you’re forcing the browser to recalculate the page layout for every frame. On a 60fps animation, that’s 60 times per second. Transitions have the same issue, but because they’re usually shorter-duration (300-400ms), the impact feels less noticeable.
The solution? Animate transform and opacity. Scale instead of width. Use translateX instead of left or margin. This works for both transitions and keyframes. Your frame rate stays smooth. Users don’t see stuttering. Everyone wins.
Good: Animating GPU properties
transition: transform 0.3s ease, opacity 0.3s ease;
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
Avoid: CPU-heavy properties
transition: width 0.3s ease, height 0.3s ease;
@keyframes expand { 0% { width: 100px; } 100% { width: 300px; } }
A Decision Framework
So how do you decide? Ask yourself these questions:
Is this triggered by user interaction?
If yes (hover, click, focus) probably a transition. If it happens on page load or loops continuously probably keyframes.
How many waypoints does it have?
Two states (before and after) transition. Multiple steps keyframes. Simple rule, but it works.
Does it need to repeat or loop?
If yes keyframes. Transitions are one-way. Once they finish, they’re done unless something triggers them again.
Are you animating GPU properties?
Always. If you’re not, restructure your approach. Transform and opacity work for both transitions and keyframes. Use them.
The Practical Reality
Most of the animations you’ll build fall into the transitions category. Hover effects, focus states, menu slides, form validation feedback. These are bread-and-butter interactions, and transitions handle them beautifully. They’re fast. They’re simple. They’re exactly what you need.
Keyframes are for when you need something more elaborate. Animated backgrounds that drift. Loading spinners. Decorative elements that catch attention. Page transition effects. These create moments of delight—when they’re done well, users actually notice and remember them.
The real power isn’t in choosing one over the other. It’s in knowing which tool solves which problem, and having the discipline to use the simpler option when it’ll work. On a budget of 60 frames per second, every millisecond of processing time matters. Use transitions for interactions. Use keyframes for choreography. And always, always animate transform and opacity.
Your users won’t notice perfect animations. But they’ll definitely notice janky ones.
Important Note
Browser support for CSS animations and transitions is excellent across modern browsers. However, always test on your target devices, especially older Android devices and Safari versions. Performance characteristics vary by hardware. What runs smoothly on desktop may need optimization for mobile. Use DevTools to measure frame rates and identify bottlenecks in your specific implementation. This article provides general guidance—your specific use case may require different approaches based on your audience and technical constraints.
