✨

CSS Animation Generator

Build CSS keyframe animations visually.

🔒No files stored🛡HTTPS encrypted⚡Works in your browser🆓100% free, no signup
Presets:
Keyframe editor
0%
50%
100%
Live preview
@keyframes myAnim {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; }
  50% { transform: translate(0px, -30px) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; }
}

.element {
  animation: myAnim 1s ease-in-out infinite normal;
}