Keyframe animations in CSS

A named sequence of states, replayable and repeatable.

@keyframes xp-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.xp.pop {
  animation: xp-pop 320ms ease-out 1 forwards;
}

.loading {
  animation: pulse 1s ease-in-out infinite alternate;
}

How it works

1. @keyframes lists the steps as percentages or from and to.
2. The shorthand order is name, duration, easing, then count.
3. forwards keeps the final frame after the run.

Keywords and builtins used here

• animation
• keyframes
• loading
• ms
• opacity
• pop
• s
• scale
• transform
• xp

The run, in numbers

Lines

18

Characters to type

299

Tokens

85

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 57 seconds.

Type this snippet

Step 3 of 8 in Motion & effects, step 13 of 21 in Responsive & modern CSS.

← Previous Next →