OneTaskBy Tim King · Updated
CSS Keyframe Timeline Editor
Type Keyframe Stops as Plain Text Lines, Preview Against a Timeline, Copy @keyframes
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Keyframe Timeline works
This CSS keyframe timeline editor turns a list of stops into an animation. Describe each keyframe stop on its own line, using a percentage followed by the values you want
at that moment, and the box replays the animation every time you change something. A timeline
under the preview marks where each stop sits and a playhead runs along it in step with the
motion, so you can see which part of the curve is responsible for what. Copy the @keyframes
block and shorthand when you are happy.
CSS keyframe timeline editor: writing the stops
Most keyframe generators give you two or three fixed stops and a handful of sliders, which is
fine for a fade or a pulse but not for anything with a settle, a bounce or a hold. This editor
takes a plain text list instead: each line starts with a percentage (or from / to) and is
followed by any of x, y, scale, rotate, opacity and blur as key=value pairs. Lines
are sorted by percentage before export, so you can add a stop in the middle without reordering.
Stops that omit a property simply do not mention it, and the browser interpolates it between the
nearest stops that do, exactly as it would in hand-written CSS.
x and y are turned into a single translate(), and scale and rotate are appended to the
same transform, in that order. Because every stop writes the whole transform, there is no risk
of one stop's rotate cancelling another's translate; if you want a property to stay put
across a stop, repeat its value on that line. opacity and blur are written as separate
declarations and can be animated on their own.
The timeline shows each stop as a tick at its percentage of the total duration. The playhead moves linearly so it represents elapsed time, not eased progress; when the box appears to hang around the 60 to 80 percent region in the default example, that is the easing curve slowing the motion between those two ticks, not the stops themselves. Switching Easing to Linear makes the two agree.
Repeat and Direction feed the shorthand directly. Alternate is useful for idle loops
because the animation plays back to its start instead of jumping, which means the first and last
stops do not need to match. Fill mode both keeps the first stop's values during any delay
and the last stop's values afterwards; use none if the element has its own resting style that
the animation should return to.
The exported CSS targets a .box class purely as a placeholder. Copy the @keyframes block and
the animation: line onto whatever element you are animating; the size and colour rules are
only there so the snippet runs as-is.
FAQ
Why does the box pause where there is no keyframe?
The easing curve slows the motion between two stops; the playhead runs on elapsed time, not eased progress. Switch Easing to Linear and the box will track the playhead exactly.
Can I animate colour or size?
Not in this editor, which covers transform, opacity and blur. Copy the exported
@keyframes and add background or width lines to the stops by hand; the browser
interpolates them the same way.
Why did my rotation disappear at one stop?
Every stop writes the full transform, so a stop that omits rotate resets it to 0 at that
point. Repeat the value on any line where the property should hold still.
Do the stops have to be in order?
No. Lines are sorted by percentage before export, so you can add a stop at 45% at the bottom of the list and it lands in the right place.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
Easing Comparison
Run two CSS easings side by side and copy the winner.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.
Text Animation
Animate a headline letter by letter and copy the CSS.
Animated Banner
Design an animated ad banner and export GIF or WebM.