TR ToolRux

CSS Animation Generator

Build CSS keyframe animations — choose presets like bounce, fade, spin, or create custom keyframes with a visual editor.

Live Preview

Generated CSS

@keyframes myAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.animated-element {
  animation: myAnimation 1s ease 0s infinite normal none;
}

Preset Animations

Animation Properties

Keyframes

0%
50%
100%

Related Tools

You might also find these useful

Flexbox Generator

Build CSS Flexbox layouts.

CSS Grid Generator

Build CSS Grid layouts.

CSS Gradient Generator

Create CSS gradients.
📖 Learn More

Everything you need to know

Preset & Custom Animations

The CSS Animation Generator includes 8 preset animations — bounce, fade, slide, spin, pulse, shake, flip, and zoom. Click any preset to load its keyframes into the editor. Customize every parameter or build animations from scratch using the keyframe editor.

Full Animation Control

Configure all animation properties: name, duration, delay, timing function, iteration count, and direction. Choose from standard timing functions like ease, ease-in-out, and linear, or use a spring-like cubic-bezier curve for bouncy effects.

Custom Keyframe Editor

Add and remove keyframe stops at any percentage from 0% to 100%. Each keyframe supports transform (translate, rotate, scale) and opacity properties. Keyframes are automatically sorted by percentage for correct animation flow.

Live Preview

Watch your animation play in real time on a sample element. Pause and play to fine-tune timing. The preview uses the same CSS you'll copy, so what you see is exactly what you'll get in your project.

Related Tools

Build flexbox layouts with the Flexbox Generator, create gradient backgrounds with the CSS Gradient Generator, or generate text shadows with the Text Shadow Generator.