CSS Animation Builder

Build CSS keyframe animations visually with a timeline editor. Export CSS and Tailwind classes.

Animation Library

Duration: 500ms

Easing

Iterations

Keyframes

Keyframe at 0%

Offset: 0%

Translate X: 0px

Translate Y: 30px

Rotate: 0°

Scale: 1.00

Opacity: 0.00

Show Tailwind

CSS

@keyframes custom-anim {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: custom-anim 500ms ease-out 1;
}

Tailwind CSS

/* Add to your CSS */
@keyframes custom-anim {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

/* Use in Tailwind */
<div class="animate-[custom-anim_500ms_ease-out]">
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

View all Goodies

NewAnimation

SVG Animation Generator

Generate animated SVG graphics — spinners, loaders, shapes, waves and more. Customize colors, speed and size, then copy or download.

Try it ->

NewAnimation

Cubic-Bezier Editor

Design custom easing curves visually with an interactive bezier editor. Preview animations in real time and export CSS or Tailwind classes.

Try it ->

Colors

Tailwind Color Converter

Paste any color and find the closest Tailwind CSS class instantly. Supports hex, rgb and hsl.

Try it ->

NewEffects

CSS Filter Playground

Combine CSS filters visually — blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia and invert with real-time preview.

Try it ->

NewEffects

Screenshot Beautifier

Transform screenshots into stunning visuals with browser frames, device mockups, gradient backgrounds and export in multiple formats.

Clamp Calculator

Generate responsive CSS clamp() values for fluid typography and spacing. Set min/max viewport and values, preview at every breakpoint.

Try it ->

View all Goodies