TechTools

CSS Animation Generator

Animation Presets

0.6s
0s

Preview

CSS

Keyframes (2 stops)

0%opacity: 0
100%opacity: 1

Generated CSS

@keyframes myAnimation {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}

.element {
  animation: myAnimation 0.6s ease-in 0s 1 normal both;
}

Tip: Apply this CSS to any element. The .element class name is a placeholder - replace it with your own selector.

Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.

Build CSS @keyframes animations without hand-coding. Choose from 16 animation presets: Fade In/Out, Slide In Left/Right/Up/Down, Bounce, Shake, Pulse, Spin, Scale Up, Flip, Rubber Band, Flash, Wobble, Heart Beat. Control animation name, duration (0.1–5s), delay (0–3s), timing function (10 options including cubic-bezier), iteration count (1/2/3/5/10/infinite), direction (normal/reverse/alternate/alternate-reverse), and fill mode. Click Play to see the animation live in the preview box. Generated CSS includes both @keyframes block and .element { animation: … } shorthand. Copy with one click.

How to Use

  1. 1Click a preset to load a pre-built animation (e.g. Bounce, Shake, Fade In)
  2. 2Adjust the duration, delay, timing function, iteration, direction, and fill mode
  3. 3Click Play to see the animation on the preview box
  4. 4Copy the generated CSS - it includes both @keyframes and the animation shorthand
  5. 5Replace .element with your actual CSS selector in your stylesheet

Features

  • 16 animation presets: Fade In/Out, Slide (4 directions), Bounce, Shake, Pulse, Spin, Scale Up, Flip, Rubber Band, Flash, Wobble, Heart Beat
  • Full @keyframes block visible with all stops
  • Controls for name, duration (0.1–5s), delay (0–3s), timing (10 functions), iteration, direction, fill-mode
  • Live preview element with Play/Reset buttons
  • 10 timing functions including 3 cubic-bezier presets and steps()
  • Generated CSS includes both @keyframes and .element animation shorthand
  • One-click copy
  • 100% browser-based

Frequently Asked Questions

Guest PlanUpgrade
Operations today0 / 3
5 MB max fileNo batch
Upgrade for more

/ related tools

JSON Formatter
QR Code Generator
Crypto & Currency Converter
HTML, CSS & JS Editor

Community Feedback

Like

00

Total Rating

No ratings yet

Reviews

No reviews yet. Be the first!

Rate & Review

Was this tool helpful?

Rate this tool:

Write a Review

0/500

/ share this tool

Twitter/XLinkedIn