CSS Keyframe Generator

Build multi-step CSS @keyframes animations visually.

Name

Duration

Timing

CSS Properties

@keyframes myKeyframes {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}