CSS Keyframe Generator
Start with bounce, spin, pulse, shake or fade, then edit the keyframes. Preview starts when you press Play; the generated CSS uses the same frame values and interval easing.
Keyframes
2–20 unique offsets, including 0% and 100%. CSS uses translate → rotate → scale. Values are sorted by offset in the output.
The preview starts only when you press Play. Stop it whenever you need. It affects only the sample shape.
A QUICK WALKTHROUGH
How to use this tool
- Select a preset or edit 2–20 unique keyframes including 0% and 100%.
- Set duration, delay, easing, repetitions, direction and fill mode; play or pause the preview.
- Copy or download CSS and apply the animated-element class to your own element.
Editable frames
Each frame has an offset, horizontal/vertical movement, rotation, scale and opacity. Output sorts offsets and requires endpoints. Limits: movement ±500px, rotation ±3600deg, scale 0–5 and opacity 0–1. This is a transform/opacity editor, not an arbitrary CSS property or multi-element timeline editor.
Timing and preview
Duration is 0.1–60 seconds and delay 0–60 seconds. Use 1–100 iterations or infinite, five standard easing functions or custom cubic-bezier, and all four direction/fill modes. Preview runs locally with Web Animations, starts only on Play, stops when the page is hidden, and can be paused or stopped. Geometry may be clipped by the preview area.
Plain CSS output
No uploads or dependencies. Export includes keyframes and a class, not HTML or a full page. Rename both identifiers when combining animations and review motion for your own audience; exported CSS does not automatically add a reduced-motion rule.
GOOD TO KNOW
Common questions
Can I change individual frames?
Yes. Add, remove or change transform and opacity values at unique offsets. Keep 0% and 100%.
Does it automatically play?
No. Press Play to start. While running, valid edits restart the preview; paused or stopped previews remain stopped after edits.