Keyframe
What Is a Keyframe?
A keyframe stores the value of one property, such as position, opacity or color, at one moment in an animation. Set two keyframes on the same property and the software works out every frame between them, a step called interpolation, so keyframe animation means fixing a few moments and letting the program draw the motion in between.
A 2 second clip played at 30 fps has 60 frames, and two keyframes can drive the movement in all of them. Every row in the chart below holds the same two keyframes, and only the easing changes.
How Does Easing Change the Motion Between Keyframes?
Easing sets how fast a value moves at each moment between two keyframes, so the same pair can glide, start and stop slowly, overshoot or jump. Presets such as Ease In Out and Ease Out Back are ready-made curves, a Bezier curve takes two handles in the same form as a CSS cubic-bezier, and Hold freezes the value, then jumps at the next keyframe. Apple Motion calls that hold Constant and offers Linear, Bezier, Ease In and Ease Out, while Blender lists Constant, Linear and Bezier.
To measure the difference, we rendered the chart’s five rows, exported the page every 0.1 seconds and read each square’s position from the frames. Linear moved its square 90 pixels in every 0.2 seconds, while Ease In Out moved 17 pixels in the first 0.2 seconds and 152 between 0.8 and 1 second.
6%
of the way at 0.5 s
custom Bezier curve 0.7, 0, 0.3, 1
+89 px
past the end keyframe
Ease Out Back, at 1.2 s
0 px
moved by Hold before 2 s
then one 900 px jump
When Should You Use Keyframes Instead of a Preset Animation?
Use keyframes when the motion has to reach exact values at exact times, and a preset when it is a standard entrance, exit or loop. A product video might slide its name plate in with a preset, then use keyframes to fly the product along a curve and stop it on the price tag.
| Use | Why | |
|---|---|---|
| Slide a name plate in and out | In and out presets | Users pick them in the web editor's Animations panel |
| Keep a sticker moving while it is on screen | A loop preset | A loop runs for as long as the block is visible |
| Fly a product along a curve to an exact spot | Keyframes on position | Tangents bend the path, and the last keyframe fixes where it stops |
| Switch a color on the beat and keep it | Keyframes with Hold easing | The color stays put until the next keyframe, then changes at once |
| Reveal a headline word by word | A text animation preset | Typewriter reveals the text one letter or one word at a time |
How Preset Animations Work in CE.SDK
In CE.SDK video editing, blocks move with preset animations. Your users pick them in the web editor’s Animations panel, and your app can set them through the engine API on Web, iOS, Android and Server.
A block can enter, loop and leave with presets
An entrance such as Slide, Fade or Zoom plays as the block appears, and an exit as it leaves. A loop such as Sway or Pulsating repeats while the block is on screen, and its duration sets the length of one cycle.
Duration and easing are set per preset
The duration is set in seconds, and the easing shapes the speed, so Ease Out starts fast and slows into place. When a longer entrance would run into the exit, CE.SDK adjusts the other one so the two never overlap.
Text presets can stagger lines, words or letters
Text presets add a writing style that splits the motion into lines, words or characters. An overlap setting runs from 0, where each part waits for the one before, to 1, where all parts move together.
FAQs
A frame is one still picture, and a video at 30 fps shows 30 of them each second. A keyframe is a moment where you fix a value yourself, and the software calculates the frames between two such moments.
No. In video compression the word means an I-frame, the frame an encoder saves complete so that players can begin decoding there when they seek. It is unrelated to the values you set when you animate, and our video compression page explains that meaning.
No. The CE.SDK docs say the editor has no keyframe controls, so your users animate blocks by picking preset in, out and loop animations in its Animations panel.
Links
Documentation and references for this concept.
Video Editor SDK
Explore the timeline that animations play on, in video editing for phones and browsers.
Base Animations Guide
Attach entrance, exit and loop animations to blocks, and set their duration and easing.
Animations Demo
Browse the preset entrance, exit and loop animations your users can apply in the CE.SDK video editor.
Related Terms
Timeline
The time-based editing interface in CE.SDK's video editor where users sequence, trim, and synchronize all media elements…
Text Animation
An effect that moves on-screen text, such as a fade, a slide or a typewriter reveal, applied to the whole block or split…
Video Composition
A CE.SDK scene configured for video output, built on the same scene/block architecture as design compositions, with the …