Keyframe

A saved moment in an animation; the frames between keyframes are filled in for you.

See it in SVG path animator. Press Copy CSS and look for @keyframes: the start and end of the line drawing.

In plain words

Drawing every frame of an animation by hand takes a long time. Instead, you set a few important moments, such as where a shape starts and where it ends. Those moments are keyframes. The computer works out every frame between them. Easing decides how the in-between frames are spread out.

Nearby

• Interpolation
• Easing
• Frame rate
• Loop
• Transform

Used by

• Image morph
• Machine Sight
• Mesh warp
• Ripple transition
• SVG path animator
• WebGL playground