Gerador de animação de quadro-chave CSS

Uma regra CSS @keyframes é na verdade uma pequena linha do tempo: um conjunto de pontos de verificação de porcentagem, cada um declarando como uma propriedade deve ser naquele exato momento, com o navegador interpolando tudo entre eles. Construir um manualmente significa manter vários desses pontos de verificação de porcentagem em sua cabeça ao mesmo tempo em diversas propriedades. Este gerador transforma essa linha do tempo em algo que você pode realmente ver e arrastar: uma faixa horizontal por propriedade, com um marcador de parada em cada ponto de verificação.

A peça central é o cursor de reprodução. Arraste-o para qualquer ponto entre 0% e 100% e a caixa de visualização salta para o estado combinado exato naquele instante - não o quadro-chave mais próximo, mas um valor real interpolado linearmente calculado entre quaisquer duas paradas que cercam o indicador de reprodução em cada faixa ativa. Propriedades numéricas como posição, rotação e escala são interpoladas como números simples; background-color interpola cada canal de vermelho, verde e azul de forma independente, o que faz com que uma faixa de cores desapareça suavemente através de tons intermediários, em vez de saltar entre as cores que você realmente definiu.

Múltiplas trilhas se combinam automaticamente em uma animação coerente: cada propriedade baseada em transformação (mover, girar, dimensionar) se funde em uma única declaração de transformação em cada porcentagem de quadro-chave, enquanto a opacidade e a cor de fundo permanecem em suas próprias linhas, exatamente como seria o CSS real escrito à mão. As porcentagens em que uma determinada faixa não tem nenhuma parada explícita são simplesmente deixadas de fora das declarações dessa propriedade propositalmente - a própria interpolação de quadro-chave do navegador preenche a lacuna entre as paradas existentes, da mesma forma que faria com qualquer regra @keyframes digitada manualmente.

Cinco predefinições – bounce, shake, pulse, fade e slide-in – carregam uma linha de tempo completa e pronta para ajustar (incluindo uma duração sensata, função de temporização e contagem de repetições) em um clique. Clique em Play a qualquer momento para ver a animação CSS real executada no elemento de visualização, gerada instantaneamente por meio de uma folha de estilo injetada dinamicamente e, em seguida, copie o bloco @keyframes completo mais a abreviação .animated-element {animation: ... } diretamente em seu próprio projeto. Como todas as ferramentas deste site, tudo é executado localmente no navegador, sem que nada seja carregado.