← Back to at-rules

CSS At-rule

@keyframes

Animation

Defines the intermediate steps in a CSS animation sequence.

Syntax

@keyframes name { from { } to { } }

Example

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Common use cases

  • Fade in/out animations
  • Slide and bounce effects
  • Loading spinners and skeleton screens

Practical developer insight

Name your keyframes semantically (fadeIn, slideUp) not generically (anim1) — you'll reuse them and readability matters.

Related

transitiontransform