Can I create more than start and end keyframes?

Yes. Add as many intermediate percentage keyframes as needed for complex motion.

Can I pause and restart the preview?

Yes. Use pause/play and restart controls to inspect animation behavior.

Does the output include a usable `.demo-element` rule?

Yes. The copied output includes both `@keyframes` and an animation shorthand example.

ADVERT

CSS Keyframes Generator

Create multi-step CSS animations with translate, rotate, scale, and opacity controls. Preview the timeline and copy clean keyframe CSS.

Timeline

Drag the position slider and add new percentage steps. Select a marker to edit its transforms.

New keyframe position

0% Keyframe

Fine-tune transforms for the selected step. Values interpolate smoothly between markers.

Translate X (px)Translate Y (px)Rotate (deg)ScaleOpacity

Animation Settings

Control duration, easing, looping, and playback direction for the generated animation.

Duration (s)Delay (s)Timing functionIteration countDirectionFill mode

Live Preview

Animate

Generated CSS

@keyframes kf-daf76d {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(60px, -20px) rotate(12deg) scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
  }
}

.demo-element {
  animation: kf-daf76d 3s ease-in-out 0s infinite alternate both running;
}

Keyframe Summary

0%translate(0px, 0px) · rotate(0°) · scale(1) · opacity 1
40%translate(60px, -20px) · rotate(12°) · scale(1.05) · opacity 0.8
100%translate(0px, 0px) · rotate(0°) · scale(1) · opacity 1

How to use this tool

Add and position keyframe markers on the percentage timeline.
Edit transforms and opacity for each selected keyframe.
Set animation options and copy the generated keyframes plus animation declaration.

What this covers

Transform controls for translate, rotate, and scale.
Opacity interpolation between keyframe states.
Animation settings including duration, easing, direction, and fill mode.

Production tips

Keep keyframe counts lean to simplify maintenance and tuning.
Prefer named easing tokens from your design system when possible.
Test reduced-motion alternatives for accessibility-sensitive interfaces.

FAQ

Can I create more than start and end keyframes?: Yes. Add as many intermediate percentage keyframes as needed for complex motion.
Can I pause and restart the preview?: Yes. Use pause/play and restart controls to inspect animation behavior.
Does the output include a usable `.demo-element` rule?: Yes. The copied output includes both `@keyframes` and an animation shorthand example.