Keyframe

A marker at a specific point on the timeline that defines the value of an animatable property (such as position, scale, rotation, or opacity) at that exact moment in time. When two or more keyframes are set for the same property, CE.SDK interpolates the values between them, producing smooth, continuous motion or transitions across the duration between those points.

Keyframes are the foundational mechanism behind all timeline-driven animation in CE.SDK. Rather than defining an animation as a preset effect, keyframes give precise, per-frame control over how any element behaves over time.

Motion Graphics for Video

A text overlay needs to slide in from the left, hold in place, then fade out before the next scene. Three keyframes on the position property and two on opacity define this behavior entirely, without any preset animation system.

Product Reveal Animations

An e-commerce video shows a product image starting small and centered, then scaling up to fill the frame over two seconds. Two keyframes on the scale property produce the zoom, timed precisely to a music beat.

Personalized Video Automation

In a headless pipeline generating personalized videos at scale, keyframe data is defined in the template. Variable elements (name, product image) inherit the animation behavior from the template and animate identically across all rendered variations without per-output editing.

Lower-Thirds and Broadcast Graphics

News and media tools use keyframes to animate name plates, tickers, and info panels in and out of frame on a precise schedule. Keyframe-driven animation makes these behaviors reproducible and adjustable without rebuilding the animation from scratch each time.

Logo and Brand Animations

Intro and outro sequences with animated logos use keyframes to orchestrate multiple properties simultaneously: a logo might scale in, fade up, and shift position in a coordinated sequence, each property driven by its own keyframe pair.

Interactive Template Design

Template authors building reusable video templates use keyframes to define the animation behavior of placeholder elements. End users filling the template inherit the animation automatically: the motion is baked into the template structure.

Select the element to animate

Choose the element on the canvas or timeline.

Move the playhead to the starting point

Position the playhead at the moment in time where you want to define the starting value.

Set the property value

Set position, scale, rotation, opacity, or another animatable property. This creates the first keyframe.

Move the playhead to the end point

Position the playhead at the moment where the property should reach a different value.

Set the new property value

This creates the second keyframe. CE.SDK automatically interpolates between the two.

Preview playback

Review the animation and verify timing and motion.

Add additional keyframes if needed

More complex, multi-stage motion requires additional keyframe markers. Adjust timing by dragging markers on the timeline.

When CE.SDK calculates the values between two keyframes, it interpolates smoothly from the first value to the second across the time span between them. The default interpolation produces a linear progression, with the property changing at a constant rate.

Easing controls (ease in, ease out) adjust the acceleration curve so the motion accelerates or decelerates at the start or end of the transition, producing more natural-feeling animation.

Keyframes live on the timeline at the element level. Each animatable property has its own keyframe track. Position keyframes and opacity keyframes for the same element are independent and can be set at different points in time.

Keyframe markers are visible on the timeline when an element is selected, and can be dragged to adjust timing without changing the property values they define.