CSS Animation Generator

Build custom keyframe animations with visual easing editor

DeveloperFREEYour data never leaves your browser

100% freeNo signupRuns in your browser

Built by WOWHOW Team · 14+ yrs engineering

CSS Animation Generator is a free, browser-based tool that lets you build custom keyframe animations with visual easing editor — with zero signup, zero installation. Your data never leaves your browser. Part of 138+ free developer and business tools at wowhow.cloud, built and maintained by a team with 14+ years of hands-on development experience.

TOOLCSS Animation Generator

Animation Preset

Duration1.0s

0.1s5s

Delay0.0s

0s3s

Iteration Count

Infinite

Direction

Fill Mode

Timing Function

Live Preview

Fade In · 1s · ease-out · 1×

CSS Output

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

.animated {
  animation: fadeInAnim 1s ease-out forwards;
}

About CSS Animation Generator

CSS animations, defined in the CSS Animations Level 1 specification, enable declarative keyframe-based motion without JavaScript. An @keyframes rule defines the animation states at specific percentages of the animation duration; the animation shorthand property binds the keyframes to an element with duration, delay, iteration count, fill mode, and easing function. The cubic-bezier() timing function — from the CSS Transitions specification — shapes the rate of change between keyframes with four control points, enabling custom easing curves beyond the built-in ease, ease-in, ease-out, and ease-in-out presets.

How It Works

The generator maintains an animation model with eight properties: animation-name (linked to the @keyframes rule), animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-timing-function, and the selected preset. Changing any property updates the CSS output and triggers a re-play of the live preview element.

The cubic-bezier visual editor renders a 200x200 canvas with the unit square. Two draggable control points (P1 in the lower third, P2 in the upper third) define the shape of the curve. The curve is drawn using the browser's Canvas bezierCurveTo() method. As you drag, the cubic-bezier(x1,y1,x2,y2) values update in the animation shorthand output.

The 13 preset animations each define a complete @keyframes block. For example, the Bounce preset generates @keyframes with from {opacity: 0; transform: translateY(-30px)} and to {opacity: 1; transform: translateY(0)} combined with a cubic-bezier(0.34,1.56,0.64,1) overshoot curve.

Who Is This For

A developer adds an entrance animation to a card component that fades in and slides up when mounted, copying the @keyframes and animation CSS from the Fade Up preset.

A frontend engineer creates a custom loading indicator with a pulsing ring, adjusting the Pulse preset's cubic-bezier to create an elastic bounce at the peak size.

A designer implements a shake animation for a failed form validation state, using the Shake preset and setting iteration-count to 1 with fill-mode: forwards.

A developer replicates a complex easing curve from a Framer Motion animation by matching the cubic-bezier control points in the visual editor and exporting the pure CSS equivalent.

How to Use

Pick an animation preset — fade, slide, bounce, spin, and more

Adjust duration, delay, iteration count, and fill mode

Use the cubic-bezier editor for custom easing curves

Copy the generated @keyframes CSS code

Frequently Asked Questions

Yes. Select 'custom cubic-bezier' as the timing function to open the visual editor. Drag the two control points to shape your curve, or use presets like Bounce and Elastic.

13 presets: Fade In/Out, Slide In (4 directions), Bounce, Pulse, Shake, Spin, Flip, Zoom In/Out. Each generates the corresponding @keyframes code.

Everything runs in your browser. No data is sent to any server.

A cubic Bezier curve is defined by four points: the start (0,0) and end (1,1) are fixed; the two control points (P1 and P2) are adjustable. The curve maps animation progress (X axis) to the actual movement amount (Y axis). A steep early rise creates a fast-start-slow-end ease-out; a flat start with steep end creates ease-in. The visual editor lets you drag P1 and P2 directly.

fill-mode controls what styles apply before and after the animation runs. "forwards" retains the final keyframe styles after the animation ends (prevents snapping back). "backwards" applies the first keyframe styles during the delay period. "both" does both. For one-time entrance animations, "forwards" is usually what you want.

Add the CSS animation with animation-play-state: paused by default. Use the Intersection Observer API in JavaScript to detect when the element enters the viewport, then change animation-play-state to running. The generator outputs the @keyframes and animation shorthand; the intersection trigger requires a small JavaScript event listener.