Working with Keyframes

Keyframes define the values of a CSS property at specific points in your animation. Sequotion provides a visual timeline for managing them.

Adding keyframes

When you add a property track, two keyframes are created at 0% and 100% with the property’s default value.

To add a keyframe in between:

• Move the playhead to the desired position
• Click the diamond button in the property row

Editing keyframe values

Select a keyframe by clicking it on the timeline or using the navigation arrows. Then edit:

• Value — the property value at that point (e.g., 0.5 for opacity, 20px 0 for translate)
• Easing — the curve used to interpolate to the next keyframe
• Position — the percentage position on the timeline

Moving keyframes

Drag a keyframe diamond on the timeline to reposition it. The 0% and 100% boundary keyframes cannot be moved.

Deleting keyframes

Select a keyframe and press Delete. Boundary keyframes (0% and 100%) cannot be deleted.

Multi-selection

Hold Shift and click multiple keyframes to select them. You can then edit their values, easing, or position simultaneously — shared values are shown, and mixed values display a placeholder.

Easing

Each keyframe has an easing curve that controls the interpolation to the next keyframe. Click the easing button to open the easing editor, where you can:

• Choose from presets (ease, ease-in, ease-out, ease-in-out, and more)
• Edit the cubic-bezier curve directly