DiffCheck

CSS Animation Generator

Build CSS @keyframes animations visually. Add keyframe stops, configure transform, opacity, and color at each stop, then copy the ready-to-use CSS.

Animation Settings

Keyframes

0%50%100%
0%none / opacity:1
50%translate(100px, 0px) rotate(180deg) scale(1.2, 1.2) / opacity:0.7
100%rotate(360deg) / opacity:1

Edit Keyframe (0%)

0%
0px
0px
0deg
1
1
1
#3b82f6
myAnimation

Output

@keyframes CSS
@keyframes myAnimation {
  0% {
    transform: none;
    opacity: 1;
    background-color: #3b82f6;
  }
  50% {
    transform: translate(100px, 0px) rotate(180deg) scale(1.2, 1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
    background-color: #3b82f6;
  }
}
animation Property
.element {
  animation: myAnimation 1.5s ease-in-out 0s infinite normal none;
}
Combined CSS
@keyframes myAnimation {
  0% {
    transform: none;
    opacity: 1;
    background-color: #3b82f6;
  }
  50% {
    transform: translate(100px, 0px) rotate(180deg) scale(1.2, 1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
    background-color: #3b82f6;
  }
}

.element {
  animation: myAnimation 1.5s ease-in-out 0s infinite normal none;
}

What Is the CSS Animation Generator?

The CSS animation generator is a visual tool for building CSS @keyframes animations without writing code. Add keyframe stops, set transform, opacity, and background color at each point, then configure duration, easing, iteration count, direction, and fill mode — all with a live preview.

The tool outputs a complete @keyframes rule plus an animation property declaration ready to paste into your stylesheet.

How to Use the CSS Animation Generator

  1. Configure animation settings: name, duration, easing, delay, iteration count, direction, and fill mode.
  2. Click a keyframe dot on the timeline strip or list to select it for editing.
  3. Adjust translate, rotate, scale, opacity, and background color for the selected keyframe.
  4. Add or remove keyframe stops with the + Add Keyframe button.
  5. Use the Play/Pause button to preview the animation live.
  6. Copy the @keyframes CSS, animation property, or combined output.

Features

  • Multi-stop @keyframes with add/remove controls and a visual timeline strip
  • Per-keyframe sliders: translateX/Y, rotate, scaleX/Y, opacity, background color
  • Animation settings: duration, delay, easing, iteration, direction, fill mode
  • Live play/pause preview in the browser
  • Outputs @keyframes rule, animation property, and combined CSS block
  • Custom animation name input

FAQ

What properties can I animate with CSS @keyframes?

CSS @keyframes can animate any animatable property: transform (translate, rotate, scale), opacity, background-color, color, width, height, border-radius, and more. For best performance, prefer transform and opacity — they are composited on the GPU and do not trigger layout recalculation.

What is the animation-fill-mode property?

animation-fill-mode controls style application before and after the animation. forwards holds the final keyframe style after it ends; backwards applies the first keyframe during the delay; both combines both behaviors.

What is animation-direction?

animation-direction controls playback order: normal (default, 0%→100%), reverse (100%→0%), alternate (alternates each cycle), alternate-reverse (starts reversed then alternates).

How do I pause and resume a CSS animation?

Set animation-play-state: paused to pause and animation-play-state: running to resume. This can be toggled via JavaScript or with a :hover / :focus selector.