Keyframe definition

Every animation has at least two defined states: where something starts and where it ends. Those states are keyframes. Everything between them is calculated, which animators call interpolation or tweening.

The term comes from hand-drawn animation. A lead animator drew the key poses of a movement, and assistants drew the in-between frames that joined them up. Motion tools such as After Effects work the same way: you set values at points on a timeline and the software fills the gaps.

How do CSS @keyframes work?

In CSS you name an animation with the @keyframes at-rule and list its states as percentages of the duration. The keywords from and to are aliases for 0% and 100%:

@keyframes fade-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

You attach it to an element with the animation property, for example animation: fade-up 400ms ease-out both. The keyframes describe what changes. The animation property sets how long it takes, the easing, how many times it runs and whether the final state sticks afterwards.

Details that trip people up

• If you leave out the 0% or 100% keyframe, the browser uses the element's own computed styles for that end.
• An animation-timing-function set inside a keyframe applies to the stretch from that keyframe to the next one, not to the whole animation.
• Declarations marked !important inside a keyframe are ignored.
• JavaScript can use the same model through the Web Animations API, for example element.animate([{ opacity: 0 }, { opacity: 1 }], 400).

Which CSS properties should you animate?

Stick to transform and opacity where you can. Browsers can animate those two on the compositor without recalculating layout or repainting, so they stay smooth on slower phones. Animating width, height, top or margin forces layout work on every frame and is a common cause of stuttering motion.

Put large or decorative motion behind a prefers-reduced-motion media query. Big movement on screen makes some people dizzy or nauseous, and that operating system setting exists for them.

What is a keyframe in video?

In video compression a keyframe, also called an I-frame, is a complete image stored in the stream. The frames after it only store what changed. Decoding has to start from a keyframe, so the keyframe interval an encoder uses affects file size and how quickly and precisely a player can jump to a point in the video.