keyframes

Keyframes are frames that define specific states in an animation or motion sequence. Each keyframe captures the value of one or more properties—such as position, rotation, scale, opacity, or color—at a distinct point in time. By recording these states at strategic moments, artists and engineers control how an object moves or changes over the duration of the animation.

In traditional animation, keyframes are drawn at crucial poses by lead animators. The frames between them are created later by assistants or through in-betweening to produce smooth motion. The spacing and timing of keyframes determine the overall rhythm of the animation.

In digital workflows, keyframes are time-stamped values stored in the animation timeline. The software interpolates the frames between keyframes to produce motion, with options such as linear or eased interpolation to shape acceleration and deceleration. In CSS, keyframes define style changes at fixed offsets (0%, 50%, 100%) within an animation, enabling transitions of properties over time.

Historically, the term originated in traditional animation where key poses defined the essential structure of a movement, and in-betweening filled the middle frames. Today keyframes are a central concept across film, 2D and 3D animation, and web design, enabling non-linear editing and reusable motion presets.

Practical considerations include planning keyframe placement to support clear timing and spacing, avoiding excessive keyframes that complicate editing, and using easing and arc motion to improve naturalness. Rigging, constraints, and the chosen interpolation mode influence how keyframed values propagate through a scene.