CSS Animation Builder

v1.0.1

Build CSS @keyframe animations visually and copy the generated code.

Builds CSS @keyframe animations visually — set keyframe stops, animated properties (transform, opacity, color), easing curves, and timing — then copy the generated CSS code.

How to use

→Add keyframe stops at 0%, 50%, and 100% and set property values at each stop.
→Choose an easing function (ease-in-out, cubic-bezier, spring) for each transition.
→Preview the animation live before copying the @keyframes and animation shorthand.

Animation preset

Duration (1s)

Delay (0s)

Easing

Iterations

Fill mode

Preview

Box

CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out 0s 1 both;
}