Retour au cours

Lesson 96: Animation Longhands: duration, iteration, direction

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

96. Animation Longhands

The animation shorthand is composed of eight properties. Focusing on the main four beyond the name:

1. animation-duration

How long one cycle of the animation takes (e.g., 2s).

2. animation-timing-function

The speed curve for the duration (same values as transition timing, e.g., linear, ease-in-out).

3. animation-iteration-count

How many times the animation should run.

  • Takes a number (e.g., 3).
  • Takes the keyword infinite (runs forever).

4. animation-direction

Defines whether the animation should alternate directions.

  • normal (runs 0% to 100% each cycle).
  • reverse (runs 100% to 0% each cycle).
  • alternate (runs 0% to 100%, then 100% to 0%, then 0% to 100%).

css .moving-element { animation-name: slide; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; /* Slides back and forth smoothly */ }