🎬

CSS Animation Generator

Create beautiful CSS keyframe animations with a visual editor

Animation Presets

Animation Properties

Name

Duration (s)

Timing

Iterations

Direction

Fill Mode

Keyframes

Transform

Opacity

Transform

Opacity

Live Preview

🎬

Generated CSS

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

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

💡 Tips

• Use transform for smooth GPU-accelerated animations
• Combine multiple transforms: scale(1.1) rotate(5deg)
• Use ease-out for natural feeling entry animations
• Set fill-mode to forwards to keep the end state