Handitab

CSS Animation Generator

Generate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.

About CSS Animation Generator

A CSS animation changes property values over time using an @keyframes rule and the animation shorthand. This generator writes both parts for eight common effects and lets you set duration, delay, easing, and repeat count. The effects animate only opacity and transform, which browsers can run without recalculating layout. The output also includes a prefers-reduced-motion rule that switches the animation off for people who ask for less motion.

How to use CSS Animation Generator

  1. Fill in "Effect", "Duration", "Delay" and "Easing", and the other options.
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Animation Generator

How do I keep the final state after the animation ends?

Add animation-fill-mode: forwards, or the word forwards in the shorthand. Without it the element returns to its original styles when the animation finishes. The generated code includes both for effects that run once or twice.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.CSS Checkbox GeneratorGenerate CSS for a custom styled checkbox with your own size, corner radius, and colors that still uses a real, accessible input element.CSS Clip Path GeneratorPick a shape such as a triangle, hexagon, star, arrow, or circle and get the matching CSS clip-path value with a live preview.CSS Cubic Bezier GeneratorSet the two control points of a cubic-bezier() easing curve, see the curve drawn, and copy the CSS transition-timing-function.CSS Gradient GeneratorGenerate a CSS linear or radial gradient from two colors and an angle with a live preview, then copy the background declaration.CSS Grid GeneratorBuild a CSS grid layout by setting columns, rows, track size, and gap with a live preview, then copy the grid-template declarations.