Orchestrating Movement: Controlling CSS Animations

Bring your web elements to life by defining keyframes and controlling animation playback with the powerful animation properties.

Welcome! Today, we'll learn to bring web pages to life with CSS animations.

/* Our canvas is ready! */

Defining Animation with @keyframes

The @keyframes at-rule is where you define the animation. You specify the styles for different points in time, using percentages from 0% (or from) to 100% (or to). This sequence of styles creates the illusion of movement.

Duration & Timing Function

animation-duration sets how long the animation takes (e.g., 2s). animation-timing-function controls the speed curve, with values like linear, ease-in, ease-out, or a custom cubic-bezier() for advanced control.

Delay, Iteration & Direction

With animation-delay, you can start an animation after a pause. animation-iteration-count defines how many times it should repeat (e.g., 3 or infinite). You can also control its direction with animation-direction (e.g., alternate).

The 'animation' Shorthand

The shorthand animation property lets you set all these values in one line, saving space and time. A common order is: animation: name duration timing-function delay iteration-count direction;. For example: animation: slide-in 1s ease-out infinite;.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

duration

name

iteration-count

timing-function

Completa el código:

animation-______: slide-in;

animation-______: 3s;

animation-______: ease-in-out;

animation-______: infinite;

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.box {
  animation-name: ;
  animation-duration: ;
  animation-iteration-count: ;
}

Unlock with Premium

Practice Example: Code Editor

Define a @keyframes rule named `pulse` that scales an element from 1 to 1.1 and back. Then, apply it to the `div` to run infinitely over 2 seconds.

Basic CSS Animations

Animation	Description
fade-in	Animation that makes an element appear slowly.
slide-in	Animation that slides an element into view from the left.
bounce	Animation that makes an element bounce.
spin	Animation that makes an element spin.
pulse	Animation that makes an element expand and contract.

* Write your CSS code and apply it to see the results.

Results:

Unlock with Premium

Knowledge Check

Which CSS property is used to control the full set of animation properties in a single declaration?

Unlock with Premium

← Previous Next →

A Practical Guide to Mastering CSS Animations

Animations are key to creating modern, engaging user experiences. They guide the user's attention, provide feedback, and add a layer of polish. This guide explores real-world applications with live previews.

1. Controlling the Flow with `animation-fill-mode`

By default, an animation snaps back to its original state once finished. To make it stay at its final keyframe, use animation-fill-mode: forwards;. This is essential for intro animations.

.box {
  animation: slide-in 1s forwards;
}

2. The Power of `steps()` for Sprites

The steps() timing function is perfect for sprite sheet animations. It jumps between keyframes instead of smoothly transitioning, creating a flipbook-style effect.

.walker {
  width: 50px; height: 72px;
  background-image: url(sprite.png);
  animation: walk 1s steps(8) infinite;
}

@keyframes walk {
  from { background-position: 0 0; }
  to { background-position: -400px 0; }
}

3. Applying Multiple Animations

You can apply multiple animations to a single element by separating them with a comma. Each can have its own duration, timing, and other properties.

.box {
  animation:
    slide-in 2s forwards,
    change-color 5s infinite alternate;
}

Practical Takeaway: Animation is communication. Use it purposefully to enhance usability and delight users. Mastering timing, delay, and easing is crucial for creating animations that feel natural and professional.