Generate CSS animation

Write a two-keyframe transform animation with chosen duration, timing curve, and repetition value.

freeworks offlinenothing uploaded
ToolCSS Animation Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The @keyframes block supplies from and to transform declarations, and an animation shorthand applies its name, seconds, easing, and iterations to .animated. Browsers interpolate compatible transform values between those endpoints.

  • Infinite is the editable initial repetition value.
  • Delay, direction, fill mode, play state, and reduced-motion handling are not emitted.

Worked example

Generate CSS animation
Input
											Name: float
From transform: translateY(0)
To transform: translateY(-12px)
Duration seconds: 1.5
Easing: ease-in-out
Iterations: infinite
Output
												@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

.animated {
  animation: float 1.5s ease-in-out infinite;
}

When to use this

Loading marks loop transforms, decorative elements float between translations, and prototypes compare easing curves over equal durations.

Edge cases

  • Iteration text is not validated, so arbitrary words can make the shorthand invalid.
  • Different transform-list shapes can interpolate through matrix decomposition instead of matching each written component.
  • No prefers-reduced-motion rule is generated; authors must supply one when motion is not essential.

References