consolelog.tools

CSS Animation Generator

Design @keyframes animations visually — pick from 24 ready-made presets or build your own on a draggable keyframe timeline with transform & opacity sliders. Live looping preview, full timing controls, and export to CSS, SCSS, Tailwind v4/v3, or the Web Animations API.

About this ToolHow it works, benefits & use cases

Design real @keyframes animations without hand-writing percentages. Start from 24 ready-made presets grouped as Entrance, Exit, and Attention effects, or build your own on a draggable keyframe timeline — drag the markers to retime each step, add or remove keyframes, and set each stop’s translateX, translateY, scale, rotate, and opacity with sliders. The engine only writes the properties that actually change between stops, so the generated keyframes stay clean. A live, looping preview plays your animation on a box, circle, card, or text target, with play/pause, restart, a loop toggle, and 0.5×/1×/2× speed controls; the preview can loop one-shot animations while the export keeps your real iteration count. Full timing controls cover duration, delay, an editable timing-function with easing presets, iteration count (including infinite), direction, and fill mode. Export to CSS, SCSS, Tailwind v4 (@theme), Tailwind v3 config, or a ready-to-run Web Animations API element.animate() call — and the entire animation is saved in a shareable URL.

How to Use

  1. 1Pick a preset from the Entrance, Exit, or Attention groups, or start from the default to build your own.
  2. 2Set timing: name, duration, delay, timing-function (type one or tap an easing preset), iterations (toggle infinite), direction, and fill mode.
  3. 3Drag markers on the keyframe timeline to retime steps, or click "Add keyframe"; select a stop to edit it.
  4. 4For the selected keyframe, adjust offset and the translateX, translateY, scale, rotate, and opacity sliders.
  5. 5Use the playback bar to play/pause, restart, toggle Loop, switch speed, and change the preview target shape.
  6. 6Choose an output format and copy, download, share, or pipe the generated animation.

Key Benefits

  • 24 presets across Entrance, Exit, and Attention categories
  • Draggable keyframe timeline with add/remove stops and per-stop transform + opacity sliders
  • Engine writes only the properties that change, keeping @keyframes minimal
  • Live looping preview on box, circle, card, or text with play/pause, restart, loop, and speed
  • Full timing controls: duration, delay, easing presets, infinite iterations, direction, fill mode
  • Export CSS, SCSS, Tailwind v4 (@theme), Tailwind v3 config, or a Web Animations API call
  • Shareable URL captures the whole animation, generated entirely in the browser

Common Use Cases

  • Creating reusable entrance and exit transitions for modals, toasts, and cards
  • Building attention effects like pulse, shake, or bounce for call-to-action elements
  • Fine-tuning a preset’s timing and keyframes instead of writing CSS by hand
  • Exporting a clean @keyframes block as a Tailwind v4 --animate-* token
  • Generating an element.animate() call to drive an animation from JavaScript
Target

Presets

Entrance

Exit

Attention

Timing

Keyframes (3)

0
25
50
75
100
Keyframe at 0%

Copy, download, share, or pipe to another tool

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

.element {
  animation: pulse 1.5s ease-in-out infinite normal none;
}

From quick preset to custom keyframes

Load a preset, then make it yours: drag the markers on the timeline to retime each step and use the sliders to set translate, scale, rotate, and opacity. The engine writes only the properties that actually change, so the @keyframes stay clean — then export to CSS, SCSS, Tailwind v4/v3, or a ready-to-run element.animate() call.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools