Create and preview CSS keyframe animations

CSS animations, tweaked live.

Pick an effect, tweak duration/easing/iteration, preview live, and copy the CSS. Pure browser; no login.

Animation

Duration (s)Delay (s)IterationEasingFill mode

Preview

●

Generated CSS

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.anim-preview {
  animation: bounce 1s ease 0s infinite normal none;
}