CSS Studio

Construtor de Animações CSS

Crie animações de keyframes com editor de linha do tempo

Configurações

s
s

Linha do Tempo

0%25%50%75%100%
Keyframe em 0%
Keyframe em 100%

Presets

Visualização

Visualização com configurações atuais

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg) translateX(0px) translateY(0px);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite both;
}