Gerador Animação CSS

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 deixa de fora a direção quando é normal e o modo de preenchimento quando não é nenhum, para que a saída permaneça legível A função de contagem e temporização de iteração é sempre escrita, mesmo em seus padrões Não há conta, nada é carregado e o gerador continua funcionando depois que a página é 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.

Aqui está o que este gerador de animação CSS produz para uma predefinição, para que você possa verificá-lo em relação à sua própria cópia Clique em Bounce e os controles carreguem 1200 ms, facilidade e Infinite, enquanto o modo de preenchimento permanece em seu padrão de ambos Copiar CSS dá a você a regra de rejeição de sete paradas @keyframes mais uma regra de elemento animado . contendo animação: bounce 1.2 s facilidade infinita ambos; Arraste o atraso para 300 ms e a taquigrafia se torna bounce 1.2 s facilidade 0.3 s infinito ambos, com o atraso colocado após a função de temporização Qualquer saída CSS do gerador de animação deve seguir essa ordem, porque o primeiro valor de tempo é sempre lido como a duração.