Free, local and no login

Free CSS animation generator

Build polished CSS animations visually instead of hand-writing keyframes. MotionCraft gives you a canvas, timeline and curve editor, then exports ready-to-use CSS.

Create an animation

Try it right here

A working example with the exact code it produces. Copy it, or open it in the editor and change anything.

Design it once, ship it everywhere.
Edit this animation All formats
animation.css
.body-copy {
  transform: translate3d(70px, 143px, 0);
  width: 340px;
  height: 34px;
  background: #00000000;
  color: #8b90a0;
  font-size: 18px;
  font-weight: 400;
  animation: body-copy-anim 1200ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes body-copy-anim {
  0% {
    transform: translate3d(70px, 161px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  50% {
    transform: translate3d(70px, 143px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(70px, 143px, 0);
    opacity: 1;
  }
}

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

Why it is built this way

Keep the distance small — 16 to 24px. Long travel makes a page feel slow to read because the eye follows the movement instead of the words. This is the entrance to reach for when you are not sure which to use.

More ready-made animations

Browse all animations →

Bounce In Animation

An element that drops in and bounces to a stop — in pure CSS.

Zoom In Animation

A clean scale-up entrance with a slight overshoot.

Card title

Supporting copy goes here.

Card Hover Lift

A card that rises and deepens its shadow on hover. Pure CSS transition.

What you can do

Create keyframe animations without writing CSS first

Fine-tune timing, transforms, opacity and easing visually

Export animation code that works in production

How it works

  1. 01

    Choose an element or preset in the studio.

  2. 02

    Set keyframes and adjust motion on the timeline.

  3. 03

    Copy clean CSS and use it in your project.

Frequently asked questions

Is this CSS animation generator free?

Yes. MotionCraft runs locally in your browser, requires no account and exports CSS for free.

Can I edit cubic-bezier easing?

Yes. Use the visual curve editor to adjust bezier handles and preview the result before exporting.

Open MotionCraft