🎞️

CSS Animation Generator

Build @keyframes animations visually with live preview. Adjust controls, add keyframe stops, and copy the generated CSS.

Quick Presets

Animation Controls

1s
0s

Keyframes

%
%
%

Live Preview

🎞️

Select a preset or adjust controls to preview

Preview updates in real time as you adjust controls

Generated CSS

@keyframes myAnimation {
  0% {
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    opacity: 1;
    background-color: #6366f1;
  }
  100% {
    opacity: 1;
    background-color: #6366f1;
  }
}

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

Animation Shorthand

animation: myAnimation 1s ease 0s 1 normal none;
name — identifier for @keyframes
duration — how long one cycle takes
timing — acceleration curve
delay — wait before starting
iteration — number of cycles
direction — play direction
fill-mode — state before/after

CSS Animation Generator — build @keyframes animations visually

🎞️ 8 Presets ⚡ Live Preview 🔑 Custom Keyframes 📋 Copy CSS

About the CSS Animation Generator

The CSS Animation Generator is a free online tool that lets you create and preview @keyframes CSS animations without writing a single line of code. Simply adjust the controls — duration, easing, delay, direction, and keyframe stops — and watch the live preview update instantly.

Once you're happy with your animation, click Copy CSS to grab the complete, production-ready code and paste it straight into your project. Every setting maps to a real CSS property: animation-duration, animation-timing-function, animation-fill-mode, and more.

Built for front-end developers, UI designers, and anyone who wants to add smooth motion to their website. Start from one of 8 ready-made presets (Bounce, Fade In, Shake, Pulse…) or build your own animation from scratch with full keyframe control.

How to Use the CSS Animation Generator

  1. 1 Choose a preset or start fresh. Click any preset button (Bounce, Fade In, Rotate, etc.) to load a ready-made animation, or leave the defaults and customise from scratch.
  2. 2 Adjust the animation controls. Set the animation name, duration (0.1–10 s), timing function, delay, iteration count, direction, and fill mode using the sliders and dropdowns.
  3. 3 Edit keyframe stops. Each keyframe stop defines transform, opacity, and background color at a specific percentage. Add stops with + Add Stop or remove them individually.
  4. 4 Preview live. Click Play to see the animation in real time. Use Pause to freeze it and Reset to restart from the beginning.
  5. 5 Copy and use the CSS. Click Copy CSS to copy the full @keyframes block plus the animation shorthand. Paste it into your stylesheet and apply the class to any element.

Common Use Cases

UI Feedback Animations

Create shake animations for validation errors, pulse effects for notification badges, or bounce effects for call-to-action buttons to draw user attention.

Page Entrance Effects

Build fade-in, slide-in, or zoom-in animations for hero sections, modals, and cards that appear when users scroll to them or land on a page.

Loading Indicators

Design custom spinners, pulsing skeletons, and rotating loaders using rotate and scale keyframes — no JavaScript required.

Branding & Logos

Add subtle animated motion to SVG logos, icons, and hero illustrations to make landing pages feel polished and dynamic.

Prototyping & Demos

Quickly prototype animation ideas before committing to a full implementation. Export CSS and paste directly into CodePen, JSFiddle, or your dev environment.

Learning CSS Animations

Understand how @keyframes properties interact by tweaking values and instantly seeing the result — the best way to learn CSS motion.

Frequently Asked Questions

What is a CSS @keyframes animation? ▼

A CSS @keyframes animation defines how an element should change its style over time. You specify property values at percentage milestones (0%, 50%, 100%) and the browser smoothly interpolates between them. The animation shorthand property then attaches those keyframes to any element.

How do I use the generated CSS in my project? ▼

Copy the generated code and paste it into your CSS file. The output includes the full @keyframes block and an .element class with the animation shorthand. Rename .element to any selector you want and apply it to your HTML element.

What does animation fill mode do? ▼

animation-fill-mode controls what styles apply before the animation starts and after it ends. forwards holds the final keyframe state after the animation completes — ideal for entrance animations. backwards applies the first keyframe during the delay period. both combines both behaviours. none (default) reverts to the original style.

What is animation direction and when should I use alternate? ▼

animation-direction controls whether cycles play forward, backward, or alternate. alternate plays forward on odd iterations and backward on even ones, creating a smooth back-and-forth effect — perfect for breathing, pulsing, or rocking animations with infinite iteration count.

What is the difference between ease, ease-in, ease-out, and linear? ▼

The timing function controls the acceleration curve of the animation. linear keeps a constant speed throughout. ease (default) starts slow, accelerates, then slows at the end. ease-in starts slow and accelerates — good for exits. ease-out starts fast and decelerates — good for entrances. ease-in-out is slow at both ends, natural for most UI animations.

Can I add more than two keyframe stops? ▼

Yes. Click + Add Stop to insert additional keyframe stops at any percentage between 0 and 100. Each stop independently controls translate, rotate, scale, opacity, and background color. Complex animations like Bounce use 8 stops to achieve realistic physics-style motion.

Is the generated CSS compatible with all browsers? ▼

Yes. CSS @keyframes animations are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. The properties generated by this tool (transform, opacity, background-color, animation shorthand) have excellent cross-browser support and do not require vendor prefixes in modern projects.