Keyframe animation

An animation described in steps with @keyframes.

What is a keyframe animation?

A keyframe animation describes steps of an animation with @keyframes, then plays it on an element with animation.

@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.notification-dot { animation: pulse 1s infinite alternate; }

Level: Journeyman · More CSS terms at this level

Updated September 27, 2026