@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}O que é o CSS Animation Generator?
O CSS Animation Generator é um editor visual para animações de quadros-chave CSS Você escolhe uma predefinição de movimento, como fade in, slide, zoom, bounce, spin ou pulso, ajusta a duração, função de temporização, atraso, contagem de iteração, direção e modo de preenchimento, assista a execução em uma visualização ao vivo e, em seguida, copie duas coisas: a regra @keyframes que define o movimento e a abreviação de animação que o reproduz Ele transforma um bloco de CSS que a maioria das pessoas copia da memória ou de uma estrutura em algo que você pode moldar e ver antes de chegar à sua folha de estilo.
Uma animação CSS tem duas metades que devem concordar A regra @keyframes nomeia uma sequência de passos, cada um escrito como um deslocamento percentual com os valores de propriedade que o elemento deve manter nesse ponto, por exemplo, 0% na opacidade 0 e 100% na opacidade 1. a propriedade de animação então faz referência a esse nome de quadro-chave e controla como ele é reproduzido: quanto tempo dura, como ele facilita, quanto tempo esperar antes de começar, quantas vezes repetir e qual direção cada passagem é executada Um nome com erro ortográfico é a única razão mais comum pela qual uma animação silenciosamente não faz nada, porque o navegador não tem regra para se ligar.
Tudo é executado no seu navegador Escolha uma predefinição, arraste os controles deslizantes de duração e atraso, alterne a curva de flexibilização, defina a animação para repetir para sempre ou um número fixo de vezes e pressione replay para assisti-la novamente A ferramenta escreve a abreviação em uma ordem segura com o nome do quadro-chave primeiro, descarta o atraso quando é zero e omite qualquer parte que corresponda ao seu padrão CSS para que a saída permaneça legível Não há conta, nada é carregado e o gerador continua funcionando depois que a página for carregada.
Também torna visíveis os trade-offs de desempenho As predefinições animam a transformação e a opacidade sempre que possível, porque essas duas propriedades são tratadas pelo compositor e não forçam o navegador a recalcular o layout, para que permaneçam suaves em altas taxas de quadros A animação de largura, altura, topo ou margem recalcula a página em cada quadro e é a causa usual de gagueira Ver um salto construído a partir de translateY em vez de topo é uma lição mais rápida sobre por que alguém é suave do que qualquer quantidade de leitura sobre ele.
Como usar o Gerador de Animação CSS?
Escolha uma predefinição de animação
Escolha um movimento na lista predefinida, como desvanecer-se, deslizar, ampliar, quicar, girar, pulsar ou agitar. Cada predefinição carrega seus quadros-chave e uma duração e flexibilização padrão sensíveis.
Ajuste o tempo e a reprodução
Defina a duração e o atraso, escolha uma função de temporização, decida se a animação se repete um número fixo de vezes ou infinitamente e escolha uma direção e um modo de preenchimento.
Visualizar e reproduzir
Assista à execução da animação no elemento de visualização e pressione replay para reiniciá-lo Como uma animação é executada na montagem, o replay remonta o elemento para que você possa vê-lo com a frequência que desejar.
Copie o CSS
Copie a regra @keyframes gerada e a abreviação da animação juntas, cole-as em sua folha de estilo e aplique a classe a qualquer elemento.
Principais características
Biblioteca de predefinições de quadros-chave
Quatorze movimentos prontos cobrindo entradas, saídas e efeitos de loop, de fade e slide a bounce, spin, pulse, shake, flip e batimento cardíaco, cada um definido com paradas reais de keyframe
Controle de reprodução completo
Defina a duração, o atraso, a função de temporização, a contagem de iterações, a direção, o modo de preenchimento e o estado de reprodução, e veja cada alteração refletida na abreviação e na visualização ao vivo de uma só vez
Keyframes e taquigrafia juntos
A saída inclui a regra @keyframes e a abreviação da animação que se liga a ela, então você copia um bloco de trabalho completo em vez de metade de um
Saída limpa e com especificações corretas
A abreviação é escrita primeiro com o nome do quadro-chave, o atraso é eliminado quando é zero e qualquer valor padrão é omitido, de modo que o CSS gerado lê a maneira como você o escreveria manualmente
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!