Animation Properties

Anim Props Deconstruct

Here’s the full cockpit: every switch, lever, and dial we can use to shape animation behavior.

Keyframes define what happens.

Animation properties define how, when, and for how long it happens.

Let’s run the control panel.

---

🕒 animation-duration

How long one full cycle takes.

animation-duration: 600ms;

---

🎚 animation-timing-function

The easing curve for the entire animation (unless overridden inside keyframes).

animation-timing-function: ease-out;

---

⏱ animation-delay

Starts the animation after a pause.

animation-delay: 200ms;

Great for staging or staggering.

---

🔁 animation-iteration-count

How many times the animation repeats.

animation-iteration-count: infinite;
animation-iteration-count: 3;

---

🔄 animation-direction

Controls how each iteration plays.

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

Perfect for yo-yo, bounce, or ping-pong effects.

---

🎭 animation-fill-mode

Determines how the element looks before and after the animation runs.

animation-fill-mode: none; /* default */
animation-fill-mode: forwards; /* keep final state */
animation-fill-mode: backwards; /* apply initial state early */
animation-fill-mode: both; /* combine forwards + backwards */

Crucial for staged entrances.

---

⏹ animation-play-state

Play and pause animations without removing them.

animation-play-state: paused;
animation-play-state: running;

Useful for scroll-triggered or hover-triggered sequences.

---

🎛 animation — shorthand

Put it all together:

animation: float 2s ease-in-out 200ms infinite alternate both;

Order:

1. name
2. duration
3. timing
4. delay
5. iteration
6. direction
7. fill-mode

(Play-state is not part of the shorthand.)

---

🐾 Annie’s Playground

Explore how different animation properties shape the feel of movement — hover each pair to compare how Annie behaves when only one setting changes.

duration

600ms

2000ms

timing-function

ease-in-out

linear

direction + fill-mode

alternate

forwards (1×)

---

➡️ Next page: Multi-Step Animations — choreographing complex sequences and motions.