Animations

Web animations should feel as good to author as they do to watch. CSS Studio gives you a real timeline editor for CSS keyframes, transitions, scroll-linked motion, and physics-based springs, all rendered as hardware-accelerated CSS that ships exactly as you saw it.

Animation types

Open the Motion tab in the Edit Element panel and click + Add to see the available types:

• Transition: CSS transition with easing, duration, and delay
• Animation: CSS @keyframes animation, opens the timeline editor
• Scroll: scroll-linked animation tied to the page or a container
• Scroll Enter: triggers when the element enters the viewport
• Scroll Exit: triggers when the element leaves the viewport

Each animation appears as a card with controls for easing, duration, delay, and other properties. Remove any animation with the close button on the card.

Transitions

Transitions are the simplest animation type and the right choice for state changes (hover, focus, active). Pick a property, an easing curve, a duration, and a delay. CSS Studio writes a single transition shorthand to the source.

You can stack multiple transitions on the same element by adding more transition cards. Each card writes its own slot in the transition shorthand.

Timeline editor

The timeline shows a horizontal track for each animated property. Keyframe stops appear as coloured dots along each track, positioned at their percentage offset (0% to 100%).

Scrubbing

Click anywhere on the time bar to jump to that point. A vertical scrubber line shows the current playback position.

Use arrow keys to snap between keyframes:

• ←: previous keyframe
• →: next keyframe

Playback

Press Space (when the animations panel is focused) or the Play button to play or pause the animation. The scrubber moves through the timeline in real time, and the element animates on the page.

Switching

Use the keyframes dropdown at the top of the panel to switch between @keyframes rules found on the page.

You can also select a keyframes rule from the Animation section of the Edit Element panel by choosing an animation-name.

Previewing

The selected animation can be previewed on any element by selecting an element with the Animations panel open. Assign it permanently in the Edit Element panel.

Creating

Click the + button next to the animation selector to create a new @keyframes rule. This opens the keyframe editor with two default opacity keyframes at 0% and 100%, ready to edit.

Chatting

An animation can be attached to a message in the chat panel so you can ask your agent for feedback or changes scoped to that animation. Click the attach icon next to the animation selector to add it to your message.

Keyframes

Click a keyframe stop on the timeline to open the keyframe editor, a compact popover that shows the property's value at that offset.

The editor exposes:

• Property name and offset: the CSS property and its position in the timeline
• Value: editable via a slider or the appropriate input type
• Easing: the timing function between this keyframe and the next
• Delete: remove the keyframe with the trash icon

Changes update the page in real time as you edit.

Adding

Click an empty space along a property's track to add a new keyframe at that offset. The new keyframe inherits the value of the previous keyframe, which you can then edit.

Moving

Drag a keyframe left or right to change its offset. The animation updates in real time so you can feel the new timing.

Deleting

With a keyframe selected, press Delete or click the delete button in the keyframe editor to remove it.

Values

• Rename a value by double-clicking its name in the labels column
• Delete a value row with the delete button at the end of the label

Springs

Springs are first-class. Instead of designing an easing curve by hand, define duration and bounce, and CSS Studio compiles a physics-based curve to a hardware-accelerated linear() easing function.

Springs apply to transitions and to keyframe animations. Higher bounce values produce more pronounced overshoot; bounce of 0 is a critically-damped curve that stops cleanly without oscillation. Because the result is a linear() function, it runs entirely on the compositor and respects prefers-reduced-motion automatically.

Scroll-linked animations

Scroll animations come in three flavors:

• Scroll: continuously linked to the page or a scroll container, like a parallax effect
• Scroll Enter: plays once when the element enters the viewport
• Scroll Exit: plays once when the element leaves the viewport

All three open the same timeline editor used for keyframe animations. Define keyframes the same way; CSS Studio emits the appropriate animation-timeline, animation-range, and view-timeline properties so the result runs on the browser's scroll-linked animation engine.