Gerador de Animações CSS

Gere visualmente código de animação CSS com keyframes

tools.css-animation-gen.animName

tools.css-animation-gen.keyframesContent

tools.css-animation-gen.duration: 500ms

tools.css-animation-gen.delay: 0ms

tools.css-animation-gen.easing

tools.css-animation-gen.iterations

✨

tools.css-animation-gen.cssCode

@keyframes myAnimation {
  from { opacity: 0; } to { opacity: 1; }
}

.animated {
  animation: myAnimation 500ms ease-in-out 0ms 1 normal forwards;
}

工具说明

Gerador de animações CSS online para configurar visualmente keyframes, duração, easing e delay com prévia em tempo real. Copie o CSS com um clique e acesse presets de animação comuns.

cssanimationkeyframes动画transitioneasing