Pular para o conteúdo principal
Uddatak

Gerador de animações CSS Keyframe

O gerador de animações CSS Keyframe permite escolher um tipo de animação entre 12 estilos prontos (aparecer/desaparecer, deslizar das quatro direções, aproximar/afastar, saltar, girar ao entrar, virar no eixo X ou Y), depois ajustar duração, atraso, função de tempo e número de repetições, com prévia ao vivo e um botão de repetir. Copie a regra @keyframes completa junto com uma classe de animação pronta para uso. Toda a geração acontece no seu navegador — nada é enviado a um servidor.

Ferramentas de Design e CSS Funciona totalmente no seu navegador

O código é gerado totalmente no seu navegador — nada é enviado a um servidor.

Código CSS

@keyframes uddatakAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Perguntas Frequentes

Sim, @keyframes e a propriedade animation são suportados em todos os navegadores modernos sem necessidade de prefixos especiais.

Continuar com

Totalmente local

Gerador de curva de aceleração Cubic Bezier

Arraste dois pontos para projetar visualmente uma curva de aceleração personalizada e copie o código cubic-bezier.

Ferramentas de Design e CSSAbrir ferramenta
Totalmente local

Gerador de Gradiente CSS

Crie visualmente um gradiente CSS linear ou radial e copie o código.

Ferramentas de Design e CSSAbrir ferramenta
Totalmente local

Gerador de clip-path CSS

Escolha uma forma pronta (círculo, triângulo, estrela, balão de mensagem...) e copie o código clip-path.

Ferramentas de Design e CSSAbrir ferramenta

Ferramentas relacionadas

Totalmente local

Gerador de harmonia de paleta de cores

Escolha uma cor base e obtenha uma paleta de cores harmoniosa (complementar, análoga, tríade, tétrade, monocromática).

Ferramentas de Design e CSSAbrir ferramenta
Totalmente local

Gerador de Gradiente Mesh

Crie um fundo de gradiente mesh suave e multiponto com um clique, e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta
Totalmente local

Verificador de Contraste de Cores

Verifique se um par de cores texto/fundo atende aos padrões de contraste de acessibilidade WCAG.

Ferramentas de Design e CSSAbrir ferramenta
Totalmente local

Gerador de Gradiente CSS

Crie visualmente um gradiente CSS linear ou radial e copie o código.

Ferramentas de Design e CSSAbrir ferramenta
Totalmente local

Gerador de Box-Shadow CSS

Projete visualmente um box-shadow CSS com controles deslizantes e copie o código gerado.

Ferramentas de Design e CSSAbrir ferramenta

Pronto para experimentar o Uddatak?

Explore a biblioteca completa de ferramentas e comece a usar o que você precisa agora — grátis, sem cadastro.

Ver todas as ferramentas