CSS Transitions vs. Keyframe Animations

The Foundation: In-betweening

At its core, all CSS animation is about changing style properties over a set duration. The browser does the heavy lifting through a process called "in-betweening" or "tweening"—calculating the intermediate values for each frame between the start and end states to create the illusion of smooth motion.

As the video demonstrates, CSS gives us two distinct mechanisms to control this process: transitions and animations.

CSS Transitions: Simple, State-to-State Motion

A CSS transition is the simpler of the two methods. It is designed to animate an element from a starting state to an ending state. It's not an animation you "run" explicitly; rather, you declare that if a certain property changes, the change should be animated over time instead of happening instantly.

This makes transitions ideal for handling changes triggered by user interaction or a change in the DOM.

Common Triggers for Transitions:

• Pseudo-classes like :hover, :focus, or :active.
• Adding or removing a class name via JavaScript (e.g., adding .is-open to a menu).

The key concept is that transitions are for two states: a beginning and an end. The browser simply needs to know which property to watch, how long the transition should take, and optionally, the timing function (e.g., ease-in-out).

Here is a classic example of using transition for a button's hover effect:

.my-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  /* 1. Declare the transition */
  transition: background-color 0.3s ease;
}

/* 2. Define the end state */
.my-button:hover {
  background-color: #2980b9;
}

In this code, we aren't "playing" an animation. We're just telling the browser: "If the background-color property ever changes for this element, take 0.3 seconds to get to the new value."

CSS Animations: Complex, Multi-Step Sequences

What if you need more than just a simple A-to-B change? What if you want an element to pulse, shake, or move through a complex path? This is where CSS animations and @keyframes come in.

Unlike transitions, which are tied to a property change, animations are self-contained sequences of steps that you define and then explicitly apply to an element.

The power of animations comes from the @keyframes at-rule. It allows you to define styles at specific points (or "frames") during the animation's timeline, using percentages from 0% (or from) to 100% (or to).

Here's an example of a simple loading spinner using @keyframes:

/* 1. Define the keyframe sequence */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 2. Apply the animation to an element */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite; /* name duration timing-function iteration-count */
}

Notice the key differences from the transition example:

1. Definition: The spin animation is defined separately using @keyframes.
2. Application: It's applied using the animation property.
3. Control: We have more control, specifying that it should loop infinite-ly.

Summary: Transitions vs. Animations

The choice between them comes down to control and complexity.

Sometimes, the best approach is to use them together. For example, a button might have a continuous, subtle pulsing animation to draw attention, but also a separate transition for a background color change when the user hovers over it.

Conclusion

You now have a clear mental model for the two primary ways of creating motion in CSS. This isn't just about making things look good; it's about building intuitive interfaces that communicate state and provide clear feedback to the user.

Key Takeaways:

• CSS Transitions are for simple, two-state animations triggered by property changes (like hover or adding a class). They are perfect for providing direct feedback to user actions.
• CSS Animations use @keyframes to define complex, multi-step sequences that are not necessarily tied to a state change. They are ideal for continuous effects, loops, and scripted cinematic sequences.
• The choice depends on the task: use transitions for reactivity and simplicity, and animations for complexity and control.

What's Next?

We've learned about the two main methods for creating animations in CSS. However, knowing how to start an animation is only half the battle. The performance of your animation—whether it's silky smooth or stutters and janks—depends heavily on which CSS properties you choose to animate.

In our next lesson, we will implement performant animations by primarily using the transform and opacity properties to avoid triggering layout or paint. You'll learn why these properties are special and how animating them allows the browser to take shortcuts for maximum performance.