Animation-name and duration

Learn animation-name and animation-duration properties.

animation-name and duration

@keyframes on its own does nothing; it must be bound to an element. The animation-name property ties the @keyframes name to the element: animation-name: spin;. The animation-duration property sets how long it runs: animation-duration: 2s;.

Without a duration the default is 0s; the animation never plays. So the two properties go together. Seconds (s) or milliseconds (ms) both work.

Real examples: loader and banner

Real examples: a .loader element spins continuously (animation-name: spin; animation-duration: 1s;). A .banner element slides (animation-name: slide; animation-duration: 8s;). Short durations feel fast, long ones feel slow.

Keep the duration long enough for users to notice. 200 ms is too quick, 5 seconds is long. Pick based on the motion's purpose.

Exercise Bind the loader and banner

The .loader element should play the spin animation and one turn should take 1s. The .banner element should play the slide animation and take 8s. Add animation-name and animation-duration to both elements.

Show example solution

/* spinning loader */
.loader {
  animation-name: spin;
  animation-duration: 1s;
}

/* sliding banner */
.banner {
  animation-name: slide;
  animation-duration: 8s;
}

Test yourself

Write the duration

.notice {
  animation-name: pulse;
  animation-duration: ____;
}

Show answer

.notice {
  animation-name: pulse;
  animation-duration: 2s;
}

What happens if animation-duration is missing?
```
.notice {
  animation-name: pulse;
}
```
- The animation never plays
- The animation ends instantly
- The animation loops forever
- The animation lasts 1 second
Show answer

The animation never plays — Correct. The default duration is 0s; the animation is invisible.
Match each property or unit to its role

animation-name

Binds the @keyframes name
animation-duration

How long it runs
2s

Two seconds
500ms

Half a second
Which duration best fits a notification pulse?
```
.notice {
  animation-name: pulse;
  animation-duration: ???;
}
```
- 0ms
- 10s
- 100s
- 1s
Show answer

1s — Correct. 1 second is a natural pace for a pulse.

Next lesson: Animation timing function

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies