# 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`.

```css
@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](https://www.ask-codey.com/glossary/subjects/css/journeyman)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/keyframe-animation