Skip to content

Design & branding

Design & branding

CSS Animation Builder

Place keyframes on a timeline, pick easing, watch it play and copy the CSS.

Private by design

Your inputs stay on your device and are not sent to our servers. Optional usage analytics does not receive your files or tool inputs.

Preparing tool

How to use CSS Animation Builder

Pick a starting animation, or add keyframes by clicking the timeline.
Select a keyframe and set its position, rotation, size, opacity, colour and easing.
Watch the live preview, then copy the CSS.

Read the detailed guide →

What are the limits of CSS Animation Builder?

Animates one element with transform, opacity and background colour, which covers most UI effects. Easing curves are CSS built-ins and common cubic-bezier presets. Your work stays on your device.

CSS Animation Builder

Keyframes on a timeline, live preview

Keyframes3Click the timeline to add a keyframe; drag to move it

Keyframe and animation

Keyframe at 50%

Position on timeline 50%Move right 0pxMove down 0pxRotate 0°Scale 1.25×Opacity 0.7ColourEasing to the next keyframe

Animation

Name (class and keyframes)Duration 1 sDelay 0 s

RepeatDirectionFill modePreview shape

Default easing

CSS

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 1s ease-in-out 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

A CSS animation moves an element between keyframes. Each keyframe is a moment on a 0 to 100% timeline with the look the element should have then; the browser fills in the frames between, shaped by the easing curve.

Smooth properties
This animation uses transform and opacity, which browsers can animate without re-laying out the page.
Ready to copy
3 keyframes, 1s.

Animate transform and opacity where you can; they stay smooth on phones.
Easing is set on a keyframe and shapes the move to the next one.
Keep 'Respect reduced motion' on so people who ask for less motion are not bothered.

Output is plain @keyframes plus one rule using the animation shorthand: name, duration, timing function, delay, iteration count, direction, fill mode. Only the properties you change are written; transform parts are written in a fixed order (translate, rotate, scale) so every keyframe interpolates the same way.