@keyframes

Definition

The `@keyframes` CSS at-rule controls the intermediate steps in a CSS animation sequence by establishing waypoints along the animation sequence.

Explain Like I'm New

Transitions only go from Point A to Point B. But what if you want an element to shake back and forth 10 times? You use `@keyframes` to write a script: 'At 0%, be here. At 50%, go left. At 100%, go right'.

Real World Example

A loading spinner. You create a keyframe script that says 'At 100%, rotate 360 degrees', and you set it to loop infinitely.

Common Use Cases

•Complex multi-step animations
•Loading spinners
•Pulsing notification dots

Interactive Example

Interview Questions

basic

How do you assign a `@keyframes` animation to a specific `<div>`?

intermediate

Can you use words instead of percentages inside `@keyframes`?

Flash Cards

Question

Assign to a div?

Click to reveal answer

Answer

You use the `animation` property on the div, and pass it the exact name you gave the `@keyframes` rule. (e.g., `animation: myBounce 2s;`).

Question

Words instead of percentages?

Click to reveal answer

Answer

Yes. You can use `from` (which equals 0%) and `to` (which equals 100%) for simple two-step animations.