CSS Animations: Transitions vs. Keyframes

CSS animations are a powerful tool for creating engaging, interactive web experiences. Whether it's a subtle button hover effect or a complex loading spinner, animations enhance user interaction and bring a sense of liveliness to a website. But when it comes to CSS, there are two primary ways to implement animations: transitions and @keyframes.

In this article, I intend to explore both methods, their strengths and use cases, and perhaps touch on performance considerations to help you make more informed decisions when animating your web projects.

CSS Transitions: The Simple Approach

I've written about CSS transitions in detail before. They allow you to animate changes between two element states, like interactions triggered by pseudo‑classes like :hover, or by adding or changing a classname or parent context. They are quick to implement and are best suited for simple, state‑based animations.

How Transitions Work

CSS transitions require a starting state, an ending state, and a trigger (e.g., hover, focus). We rely entirely on the browser to automatically calculate and undertake the animation between the styling of those two states.

Example: Button Hover Effect

button {  background-color: #3498db;  color: white;  transition: background-color 0.3s ease, color 0.3s ease;}button:hover {  background-color: #2ecc71;  color: black;}

When the user hovers over the button, the background and text colour smoothly transition over 0.3 seconds between the two states.

When to Use Transitions

• Simple, two‑state animations.
• Interactions like hover, focus, or active effects.
• When you want lightweight, easy‑to‑read code.

You will ‑ in fact ‑ find my personal website quite literally littered with transition‑based animations ‑ there isn't a single @keyframe animation anywhere on my website (at the time of writing anyway).

@keyframes: Advanced Animations

I have ‑ of course ‑ also written about @keyframe animations in detail before.

For more complex animations that might require multiple steps or states, or repeat over time, the @keyframes rule is your tool of choice. Keyframes define how an element should look at different points during the animation sequence, whilst allowing the browser to animate between them.

How @keyframes Work

A keyframes animation is defined in two parts:

1. The @keyframes block, where the animation steps are specified.
2. The animation property, which applies the animation to an element.

Example: A Loading Spinner

@keyframes spin {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}.loader {  width: 50px;  height: 50px;  border: 5px solid #3498db;  border-top: 5px solid transparent;  border-radius: 50%;  animation: spin 1s linear infinite;}

In this example we're creating a rotating spinner using @keyframes which rotates the element continuously.

When to Use Keyframes

• Complex animations with multiple steps or states.
• Continuous animations, like loaders or spinners.
• Animations that require finer control over timing and properties.

Performance Considerations

Animations can impact performance, especially on resource‑constrained devices like older mobile phones or even TVs. Here are some tips for smooth and efficient animations:

• Use Hardware‑Accelerated Properties

  : Animating properties like transform and opacity offloads the work to the device GPU, which ensures smoother animations.

• Avoid Layout‑Triggering Properties

  : Animating properties like width, height, or top triggers reflows and can cause performance issues. If you need to move something, consider using transform() instead.

• Limit Simultaneous Animations

  : Too many animations running at once can overwhelm the browser, leading to lag.

• Avoid Animations during Repeated Events

  : This is more of a JavaScript concern, perhaps, but if you can, avoid scenarios where you are animating whilst the browser is doing something else strenuous, like scrolling.

Wrapping up

CSS offers two main animation tools, but they are quite different from one another. transition is used for for simple, state‑based changes, whilst @keyframes allows us to build up complex, timeline‑based, multi‑step animations.

Key Takeaways

• Transitions

  are Ideal for simple, two‑state animations triggered by user interaction.

• Keyframes

  are better for complex or continuous animations with multiple steps.

• Performance Matters

  : Use hardware‑accelerated properties like transform and opacity to leverage hardware support and smooth animations.

When used thoughtfully, CSS animations can elevate a user's experience whilst keeping our web projects performant and engaging.