Platform under construction

Animation & Interaction

Advanced

Keyframes

Keyframes describe a named animation over time. They are best for motion that runs without a direct one-step state change.

@keyframes pulse {
  50% { opacity: 1; transform: scale(1.08); }
}
.dot { animation: pulse 1.8s ease-in-out infinite; }

Motion mental model

Keyframes are timelines for CSS.

A transition animates from the old value to the new value when a state changes. A keyframe animation defines its own timeline.

Use keyframes for loading indicators, pulsing status lights, entrance sequences and repeating motion that needs more than a start and end state.

Good keyframe animations are purposeful and controlled. Infinite decorative motion can quickly become distracting or inaccessible.

Name

The @keyframes block gets a reusable animation name.

Timeline

Use from/to or percentages to describe frames.

Playback

animation-duration and timing-function control speed and feel.

Repetition

iteration-count decides whether it runs once or loops.

Visual model

See the interaction sequence before writing the motion.

Start frame

The animation begins with a known visual state.

40%

Middle frame

Intermediate frames create rhythm.

70%

Accent frame

Motion can pause, pulse or overshoot.

100%

End frame

The animation lands or loops.

Good CSS versus fragile CSS

Controlled keyframe animation

@keyframes pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.status-dot { animation: pulse 1.8s ease-in-out infinite; }

Endless noisy motion

@keyframes spin-jump {
  100% { transform: rotate(360deg) translateY(-80px); }
}

* { animation: spin-jump .4s linear infinite; }

Rules of thumb

Motion should guide attention, confirm state and stay out of the way.

Use keyframes for timelines

Choose keyframes when motion needs more than a simple state transition.

Name animations by purpose

pulse-status is clearer than anim1.

Avoid global animation selectors

Never attach animation to broad selectors like every element.

Limit infinite loops

Loop only when the motion communicates active state or progress.

Control fill-mode

Decide whether the element keeps the first or last keyframe style.

Respect reduced motion

Repeating animations should pause or simplify for reduced-motion users.

Production thinking

Good animation is fast, purposeful, accessible and testable.

Why does this matter?

Keyframes let CSS communicate time, progress and activity, but they also carry the highest risk of decorative noise.

Accessibility

Infinite animation should be avoidable. Reduced-motion users should get a still or simplified state.

Production note

Document reusable animation names and do not scatter one-off keyframes across random component files.

SEO note

Do not rely on animation to reveal essential information that is not otherwise present in HTML.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Remove animation-delay and notice how the rhythm changes.
Change infinite to 3 and see how the animation stops after three cycles.
Remove the reduced-motion query and explain what risk returns.

Practice assignment

Do this before moving to the next lesson.

Create a named @keyframes animation.
Apply it to a small status indicator.
Add a prefers-reduced-motion fallback.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand Keyframes.