Gerador de animações CSS com keyframes

Uma regra @keyframes CSS é na verdade uma pequena linha do tempo: um conjunto de pontos de verificação em percentagem, cada um a declarar o aspeto que uma propriedade deve ter naquele momento exato, com o browser a interpolar tudo o que fica pelo meio. Construir uma à mão exige manter vários destes pontos de verificação na cabeça ao mesmo tempo, em várias propriedades — este gerador transforma essa linha do tempo em algo que pode realmente ver e arrastar: uma faixa horizontal por propriedade, com um marcador de paragem em cada ponto de verificação.

O elemento central é o cursor de arrasto. Arraste-o para qualquer ponto entre 0% e 100% e a caixa de pré-visualização salta para o estado combinado exato naquele instante — não para o keyframe mais próximo, mas para um valor real interpolado linearmente entre as duas paragens que rodeiam o cursor em cada pista ativa. Propriedades numéricas como posição, rotação e escala interpolam como números simples; background-color interpola cada canal vermelho, verde e azul de forma independente, o que faz com que uma pista de cor mude suavemente através de tons intermédios em vez de saltar entre as cores que realmente definiu.

Várias pistas combinam-se automaticamente numa animação coerente: todas as propriedades baseadas em transform (mover, rodar, escalar) fundem-se numa única declaração transform em cada percentagem de keyframe, enquanto opacity e background-color permanecem nas suas próprias linhas, exatamente como ficaria o CSS real escrito à mão. As percentagens em que uma determinada pista não tem uma paragem explícita são simplesmente omitidas das declarações dessa propriedade de propósito — a própria interpolação de keyframes do browser preenche o espaço entre as paragens que existem, da mesma forma que faria para qualquer regra @keyframes que escrevesse manualmente.

Cinco predefinições — ressalto, tremer, pulsar, desvanecer e deslizar — carregam uma linha do tempo completa e pronta a ajustar (incluindo uma duração, função de temporização e contagem de repetições sensatas) com um clique. Carregue em Reproduzir a qualquer momento para ver a animação CSS real a correr no elemento de pré-visualização, gerada instantaneamente através de uma stylesheet injetada dinamicamente, e depois copie o bloco @keyframes completo mais a shorthand .animated-element { animation: ... } diretamente para o seu projeto. Como todas as ferramentas deste site, tudo corre localmente no browser, sem nunca enviar nada para lado nenhum.