Keyframe Animator

Build @keyframes visually — timeline editor with live looping preview

Timeline1s · 2 stops
0%
25%
50%
75%
100%
@keyframes my-animation {
  0% { opacity: 1; background-color: #6366f1; }
  100% { opacity: 1; background-color: #6366f1; }
}

.animated {
  animation: my-animation 1s ease infinite normal forwards;
}

About this tool

What is the keyframe animator?
A visual CSS @keyframes editor with a timeline. Add keyframe stops at percentage points and set CSS properties at each stop. The generated @keyframes block and animation shorthand copy to your clipboard.
Which CSS properties can I animate?
Transform (translate, rotate, scale), opacity, color, background-color, border-radius, and filter. These are the GPU-composited properties that animate smoothly in the browser.
Can I preview the animation on a real element?
Yes. The preview area shows your animation playing on a box in real time as you edit keyframes.
Can I use a custom easing between keyframe stops?
Yes. Each keyframe stop accepts an animation-timing-function override so you can mix linear, ease-in-out, and custom cubic-bezier curves within a single animation.
About

Pick a preset or click + Add in the Keyframe panel to insert a stop in the widest gap. Each stop has its own translate, scale, rotate, opacity and background color.

Press the timeline dots to jump between keyframes. Play / Pause / Stop in the header controls playback.

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →
View all tools →