Animation Timeline

Open Timeline beside Problems and Output in the bottom panel. If the panel is hidden, choose View → Timeline to show it. The tab stays available regardless of the active source file or selected element.

Play, Pause, Restart, and Fixed time control Studio Preview without a selection. The active playback mode is highlighted. Opening or closing Timeline does not change that mode. Preview starts in Play; you do not need to open Timeline to start CSS animations.

Select a source element to inspect its CSS animation and transition rules. Timeline checks each static class, the element ID, and its tag instead of only the first class. Editing a track updates the CSS rule that declares it.

The header holds the shared playback controls; the track below belongs to the selected element (span.bar__fill here) and shows its duration, easing, loop count, and direction alongside a keyframe row for each animated property. Use Add keyframe to insert a point at the current time.

Playing continues while you pan or zoom the Preview canvas. A package finishing loading uses the current playback mode, including a Play or Pause choice made while it was loading.

Change keyframe points, duration, delay, easing, repeat count, direction, and transitions in the Timeline. These changes update the CSS source and work with Studio undo and redo.

Use Fixed time or drag the time marker to inspect a precise moment. The numeric field sets that fixed time in milliseconds; it is not a running counter. Choose Play to resume. These controls affect Studio Preview, not Unreal playback.

Preview pseudo-state choices include Default, Hover, Active, Focus, Gamepad Focus, and Disabled. Use them to check the animation without moving the mouse or gamepad focus.