CSS Animation Generator

Create CSS keyframe animations with live preview.

Generators

Developer

Generate CSS Animation

Generate CSS animations

Preview

Animation Properties

Name

Duration: 1000ms

Timing Function

Delay: 0ms

Iteration Count

Direction

Fill Mode

Keyframes

Offset: 0%

Properties (CSS declarations)

Offset: 100%

Properties (CSS declarations)

CSS Output

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: myAnimation 1000ms ease 0s infinite normal none running;
}

About Animation Generator

Create CSS keyframe animations with a visual editor. Define keyframes with CSS properties, and configure timing, duration, and iteration settings. Preview your animation in real-time.

Related Tools

CSS Gradient Generator

Generate CSS gradients

Box Shadow Generator

Generate box shadows

Random String Generator

Generate random strings

Random Email Generator

Generate fake emails