CSS Animation Builder

Build simple CSS keyframes and animation shorthand values.

Name Duration s Timing Repeat

Preview

@keyframes float-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.demo {
  animation: float-in 1.2s ease infinite;
}

About this tool

Build simple CSS keyframes and animation shorthand values.