Advanced Features

CSS Animations

Multi-step keyframe animations that run automatically.

1Defining @keyframes

Name a sequence and describe the property values at each step.

Example Code

css

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

2Applying Animations

Use the animation shorthand: name, duration, easing, delay, iteration, direction, fill-mode.

Example Code

css

.hero {
  animation: fadeInUp 0.6s ease-out both;
}

3Looping & Infinite

Use infinite for continuous animations like spinners and pulses.

Example Code

css

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader { animation: spin 1s linear infinite; }

4Understand it in a real interface

A CSS animation uses named keyframes and timing settings to describe a sequence. Copying the keyframes without applying the animation declaration will not run it, and copying only the declaration without the named keyframes leaves the sequence undefined. Motion should communicate a meaningful state.

5Try it yourself

Create a short entrance using opacity and a small translation. Copy both required parts into a page, then disable the animation through a reduced-motion rule. Verify that the content remains visible and usable when the animation does not run.

Finished reading?

Mark this topic as complete to track progress.

CSS Transforms

Next Topic

CSS Variables (Custom Properties)