Creating Complex Animations with CSS `@keyframes` and `animation` Properties

Published on: July 9, 2024 by Dr. Talib

While CSS transition is perfect for simple start-to-end animations, what if you need more control? What if you want an animation with multiple stages, or one that loops infinitely? This is where CSS @keyframes come in. They allow you to define the "waypoints" of an animation, giving you full control over its flow and timing.

Defining the Animation with `@keyframes`

The Concept: The @keyframes at-rule is where you define the stages of your animation. You give it a name and then specify the CSS properties for different points in the animation's timeline, from 0% (the start) to 100% (the end). You can also use the keywords from and to as aliases for 0% and 100%.

Example of a simple "fade-in and slide-up" animation:

/* Define an animation named 'fadeInUp' */
@keyframes fadeInUp {
  /* At the start of the animation (0%) */
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  /* At the end of the animation (100%) */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

This definition doesn't do anything on its own. It's a reusable recipe for an animation that we can now apply to any element.

Applying the Animation with the `animation` Property

The Concept: Once you have defined your @keyframes, you use the animation property (or its sub-properties) on an element to make it come to life.

The animation shorthand property lets you control every aspect of how the animation runs.

Example of applying our animation to a heading:

<style>
  /* (The @keyframes fadeInUp rule from above would be here) */
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

  .animated-title {
    /* Apply the animation using the shorthand property */
    animation: fadeInUp 1s ease-out;

    /*
      Let's break that down:
      - 'fadeInUp': The name of the @keyframes rule.
      - '1s': The animation-duration.
      - 'ease-out': The animation-timing-function.
    */
  }
</style>
<h1 class="animated-title">Hello, World!</h1>

Try it Yourself: Paste this code into the HTML Viewer. When the page loads, you'll see the title smoothly fade in and slide up into place. This is a common technique for adding polish to page-load events.

Full Control: The `animation` Sub-Properties

The real power comes from the other values you can add to the `animation` property to control its behavior.

animation-delay: Pauses before the animation begins (e.g., 0.5s).
animation-iteration-count: How many times the animation should repeat (e.g., 3, or infinite for a non-stop loop).
animation-direction: The direction of the animation. alternate is a popular value that makes the animation play forwards, then backwards, then forwards again.
animation-fill-mode: Defines what styles are applied before the animation starts and after it ends. forwards is very useful, as it makes the element retain the styles from the final (100%) keyframe.

Example of a Pulsing, Looping Animation:

<style>
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  .pulsing-dot {
    width: 50px;
    height: 50px;
    background-color: #4f46e5;
    border-radius: 50%;
    
    /* Shorthand: name duration timing-function delay iteration-count direction */
    animation: pulse 2s ease-in-out infinite;
  }
</style>
<div class="pulsing-dot"></div>

This example creates a dot that endlessly grows and shrinks. By defining a `50%` keyframe, we create a more complex, multi-stage animation that wouldn't be possible with `transition`.

From Simple Effects to Storytelling

CSS Keyframe animations are a powerful, declarative, and performant way to create rich visual effects directly in your stylesheet. They are the engine behind everything from subtle loading spinners to complex, multi-stage introductory sequences. By mastering the relationship between the @keyframes definition and the animation property, you gain a tool that can significantly enhance the user experience and bring a dynamic sense of life to your web pages.

Creating Complex Animations with CSS @keyframes and animation Properties