CSS Animation Timeline Editor

Runs in your browserDesign Tools#Animation#CSS

Build CSS keyframe animations on a timeline and copy them as CSS, Tailwind or Motion code.

0.00 s · 0%

Duration (s)

Loop

Keyframe

Select a keyframe on the timeline, or press + on a track to add one at the playhead.

Track

Move X

Move Y

Scale

Rotate

Opacity

0%25%50%75%100%

Drag keyframes to move them (they snap to 5%; hold Shift for 1%). With a keyframe focused: arrow keys nudge it, Delete removes it.

Code

Class name

.slide-in {
  animation: slide-in-move-x 2s infinite, slide-in-rotate 2s infinite, slide-in-fade 2s infinite;
}

@keyframes slide-in-move-x {
  0% {
    translate: -120px 0;
    animation-timing-function: ease-in-out;
  }
  100% {
    translate: 120px 0;
  }
}

@keyframes slide-in-rotate {
  0%, 50% {
    rotate: 0deg;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  100% {
    rotate: 90deg;
  }
}

@keyframes slide-in-fade {
  0% {
    opacity: 0.2;
    animation-timing-function: ease-out;
  }
  40%, 100% {
    opacity: 1;
  }
}

How to use, limits & privacy

About CSS Animation Timeline Editor

Build a CSS keyframe animation on a timeline instead of writing it by hand. Move, scale, rotate and fade a box on five tracks, give each keyframe its own easing curve, scrub the playhead to check any moment, and copy the result as CSS, a Tailwind config or Motion (Framer Motion) code. Each track becomes its own @keyframes, so a rotation never resets a movement. It runs in your browser.

How to Use

Place keyframes

Move the playhead by clicking or dragging the ruler, then press + on a track to add a keyframe there. Drag keyframes along the track; they snap to 5%, or 1% while you hold Shift.

Set values and easing

Select a keyframe to change its time, value and easing to the next keyframe: pick a preset such as Ease in-out or Overshoot, or type the four cubic-bezier numbers.

Play and copy the code

Press Play to watch it, set the duration and Loop, then choose CSS, Tailwind or Motion, name the class and click Copy code.

Privacy & Processing

Mode: local
Files Leave Browser: Local tool processing; review details below
Max Input Size: Device memory limits
Account Required: No
Data Stored Locally: The timeline (keyframes, duration, loop and class name) is saved in this browser under toolkit360_css_timeline; clear site data to remove it.
Network Processing: Assets or models may require an initial download

Everything runs in your browser. Nothing you build is sent anywhere.

Rules & Limitations

Five tracks: Move X and Move Y (px), Scale, Rotate (degrees) and Opacity. Colours, size, filters and paths are not animated.
The code uses the individual translate, rotate and scale properties. When X and Y have different keyframes it also uses @property, which needs Chrome or Edge 85, Safari 16.4 or Firefox 128 and later.
Before the first keyframe a track holds the first value, and after the last it holds the last value.
The Tailwind code is a tailwind.config.js extension (Tailwind v3, or v4 through @config). The Motion code imports from motion/react.
Your timeline is saved in this browser only; Reset to example replaces it.

Top Suggestions

Designing an entrance animation for a hero section or a modal
Building a loading or attention animation without trial and error in code
Making a curved motion path by giving X and Y different easing
Turning a CSS animation idea into a Motion component for a React app

CSS Animation Timeline Editor FAQ

How do I make a CSS keyframe animation?

Add keyframes at points on the timeline, set each value and easing, and press Play to check it. The CSS tab then shows the class with its animation list and one @keyframes per track; click Copy code and add the class to your element.

Why does each property get its own @keyframes?

So every track keeps its own timing. With one shared transform, a keyframe on one property resets the others at that moment and easing leaks between them. Separate animations on translate, rotate and scale avoid both problems.

What is the difference between ease, ease-in-out and cubic-bezier?

They are all cubic-bezier curves: ease and ease-in-out are named presets, and cubic-bezier(x1, y1, x2, y2) lets you set the curve yourself. Y values below 0 or above 1 make the motion overshoot, as in the Overshoot preset.

Can I use the animation in Tailwind CSS or Framer Motion?

Yes. The Tailwind tab gives keyframes and animation entries for tailwind.config.js, including the timing functions; use the animate- class it names. The Motion tab gives a motion.div with keyframe arrays and a full transition for every value.

Is my animation saved or uploaded?

It is saved in this browser's local storage so it is still there next time, and it is never uploaded. Clearing your browser's site data for this site removes it.