Construtor de Animações CSS

Crie animações CSS visualmente. Editor de keyframes, curvas de temporização, predefinições e saída CSS gerada.

Predefinições

Pré-visualização ao vivo

Elemento-alvo

Tipo

Size: 80px

Cor

Propriedades da animação

Duration: 1s

Delay: 0s

Função de temporização

Iterations (infinite)

Direction

Modo de preenchimento

Keyframes (2)

100%

Keyframe at 0%

Position: 0%

Opacity: 1

Translate X: 0px

Translate Y: 0px

Rotate: 0deg

Scale: 1

Border Radius: 8px

Cor de fundo

CSS gerado

@keyframes custom-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #10b981;
    border-radius: 8px;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #10b981;
    border-radius: 8px;
  }
}

.animated-element {
  animation: custom-animation 1s ease 0s infinite normal both;
}

Como criar animações CSS visualmente

Projete animações CSS por keyframes com um editor visual usando o Construtor de Animação CSS gratuito do The IT Hustle.

1
Escolha um elemento alvoSelecione o que animar: uma caixa, círculo, texto ou botão. Personalize o tamanho e a cor.
2
Adicione keyframesClique na linha do tempo para adicionar pontos de keyframe. Para cada keyframe, defina transform (translate, rotate, scale), opacidade e cor.
3
Configure o tempoDefina duração, easing (com editor visual de curva), atraso, número de repetições e direção.
4
Copie o CSSO CSS de @keyframes e animation gerado se atualiza em tempo real. Copie e cole no seu projeto.

Perguntas frequentes

Sim. As predefinições incluem Fade In, Slide In Left, Bounce, Pulse, Shake, Spin, Flip e Rubber Band. Clique em uma predefinição para carregá-la, e personalize a partir daí.

É uma curva de easing personalizada definida por quatro pontos de controle. O editor visual de curva permite arrastar os pontos de controle para criar um easing personalizado — inícios lentos, finais saltitantes, ou qualquer sensação que você quiser.

Sim. Cada keyframe pode definir transform (translateX/Y, rotate, scale), opacidade, background-color e border-radius simultaneamente.

Ferramentas relacionadas

Gerador de Gradiente CSS Conversor de Unidades CSS Gerador de Paleta de Cores