Keyframe Animation Generator

Build custom CSS keyframe animations with multiple steps. Control transform and opacity at each keyframe.

Name

Duration (s)

Timing

Iterations

Generated CSS

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

.element {
  animation: myAnimation 1s ease infinite;
}

Keyframe Animation Generator

Keyframe Animations

Animation Tools