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

Clicking a keyframe on the timeline selects it without moving the playhead. This lets you inspect a keyframe’s value without losing your current playhead position.

Navigating keyframes

Each property row has navigation controls:

• ◀ / ▶ (chevron buttons) — jump the playhead to the previous or next keyframe on that track
• ◆ (diamond button) — if a keyframe exists at the playhead, selects it; if not, adds a new keyframe at the current position

These controls let you step through keyframes without clicking directly on the timeline.

Moving keyframes

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

Deleting keyframes

Select a keyframe and press Delete. Boundary keyframes (0% and 100%) are pinned and cannot be deleted — every track always has a start and end keyframe.

Boundary keyframes

The keyframes at 0% and 100% are pinned — they cannot be moved, deleted, or dragged past each other. This ensures every property track always has a defined start and end value. You can still edit their values and easing.

Multi-selection

There are several ways to select multiple keyframes:

• Ctrl+Click (Cmd on Mac) — toggle individual keyframes in and out of the selection
• Marquee select — click and drag on empty timeline space to draw a selection box around multiple keyframes

When multiple keyframes are selected, shared values are shown in the property inputs. Mixed values display a placeholder. You can edit values, easing, or position for all selected keyframes simultaneously.

Copy, cut, and paste

You can copy, cut, and paste keyframes to duplicate values or move keyframes between positions.

Shortcut	Action
Ctrl+C	Copy selected keyframes to clipboard
Ctrl+X	Cut selected keyframes (copy + delete)
Ctrl+V	Paste keyframes from clipboard

Paste behavior

Where keyframes are pasted depends on the current selection:

• No selection (or same keyframes still selected from copy) — keyframes are pasted at the playhead position on their original tracks
• Different keyframes selected — pasted values are applied to the selected keyframes (see below)

Pasting a single keyframe to multiple targets

If you copy one keyframe and then select multiple keyframes before pasting, the copied value and easing are applied to all selected keyframes, regardless of which tracks they are on. This is useful for applying the same value across multiple properties or elements.

Pasting multiple keyframes

When you copy keyframes from multiple tracks and paste with a selection, Sequotion matches clipboard entries to selected keyframes by track. Matched keyframes are updated with the copied values. Unmatched clipboard entries create new keyframes at the paste position on their original tracks.

When pasting multiple keyframes without a selection, relative spacing between keyframes is preserved. For example, copying keyframes at 20% and 60% and pasting with the playhead at 50% places them at 50% and 90%.

Edge cases

• Boundary keyframes (0% and 100%) can be copied but not cut — cut copies them to the clipboard without deleting them
• Paste overflow — if a pasted position would exceed 100%, it is clamped to 100%
• Deleted tracks — if a track is removed after copying, clipboard entries for that track are skipped on paste
• Undo — pasting creates an undo checkpoint; Ctrl+Z reverts the paste while the clipboard remains available for re-pasting

Clearing selection

• Escape — clears all selections (keyframes, tracks, targets, and events)
• Click empty timeline space when keyframes are selected — clears the selection without moving the playhead
• Click empty timeline space with nothing selected — moves the playhead to that position

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