CSS Animation Builder

About CSS animation builder

Build a @keyframes rule and the matching animation shorthand in one place. Add keyframes at any percentage, write the opacity and transform for each, choose timing, iterations and fill mode, then press Play to run it on a preview square. It is a quick route from idea to working CSS.

How to use it

1. Enter an animation Name. Spaces are converted to hyphens automatically.
2. In Keyframes, set each position percentage and type values into the opacity and transform fields. Use Add keyframe for more, up to eight.
3. Under Animation settings set Duration, Delay, Timing function, Iterations (1, 2, 3 or infinite) and Fill mode.
4. Press Play to run the animation on the square.
5. Copy both blocks from Generated CSS.

The default fade-and-drop entrance

myAnimation, 0% opacity 0 translateY(-20px), 100% translateY(0), 600 ms ease-out

@keyframes myAnimation {
  0% {
  opacity: 0;
  transform: translateY(-20px);
  }
  100% {
  transform: translateY(0);
  }
}

animation: myAnimation 600ms ease-out 1 normal both;

When to use it

• Writing a fade-in-and-slide entrance for cards as they appear on a page.
• Creating a pulse by scaling to 1.1 at 50 percent and back at 100 percent.
• Trying infinite iterations to see how a loader or attention hint feels.
• Learning what fill-mode both does before and after the animation runs.

Questions about CSS animation builder

Which properties can I animate here?

Each keyframe has an opacity field and a transform field. Opacity of 1 and a transform of none are treated as defaults and left out, and a keyframe with neither prints a no-changes comment.

What is fill mode both?

It keeps the first keyframe's styles during any delay and holds the last keyframe's styles once the animation ends, so the element does not jump back to its original look.

Where does the new keyframe appear?

At the midpoint of the first pair of existing positions that has a free spot, which is 50 percent with the default two keyframes.

Can I remove keyframes freely?

Down to two. An animation needs a start and an end, so the remove button disables at that point.

Does the shorthand include a direction?

It always writes normal in the direction slot, which plays forward. Edit that word after copying if you want reverse or alternate.

Related tools

• CSS transition builderConfigure property, duration, timing-function, and delay — preview the easing with a live hover demo
• Cubic-bezier generatorDrag control points on an SVG canvas to craft cubic-bezier easing curves — includes preset library
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview
• Glassmorphism generatorCreate frosted-glass effects with backdrop blur, transparency, and border controls — live preview included