CSS Keyframe Animation Generator

Create custom @keyframes animations with ease.
Add keyframe stops, customize transforms, and preview live.

Presets

Animation Name

Duration1s

Delay0s

Timing Function

Iteration Count

Direction

Fill Mode

Keyframe Stops

Editing: 0%

Opacity1.00

Translate X0px

Translate Y0px

Rotate0deg

Scale1.00

Skew X0deg

Skew Y0deg

Background Color

CSS Code

@keyframes myAnimation {
  0% {
    background-color: #3b82f6;
  }
  100% {
    background-color: #3b82f6;
  }
}

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

Extract animations from any website

See an animation you love? Frontend Hero's CSS Scanner lets you inspect any element's animation and keyframes in 2 clicks. No more reverse engineering.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →