A página abre como @keyframes kivMotion a 1400 ms, ease, uma iteração e keyframes em 0%, 50% e 100%, e cada quadro tem posição, deslocamento, rotação, escala e opacidade próprios. A prévia reproduz a mesma declaração animation que o painel de saída imprime e os dois blocos saem na ordem das posições.
Funciona localmente no seu navegadorA página abre como @keyframes kivMotion a 1400 ms, ease, uma iteração e keyframes em 0%, 50% e 100%. A prévia usa a mesma declaração animation que o painel de saída imprime: o que você reproduz é o que você copia.
Cada controle numérico tem um limite medido: duração 100-20000 ms, posição 0-100%, opacidade 0-1, deslocamento ±300 px, rotação ±720°, escala 0-4 e de dois a oito keyframes. Um valor fora do intervalo é gravado de volta no limite ao sair do campo; um campo vazio restaura o valor anterior em vez de virar zero.
A exportação contém a regra @keyframes com um bloco por keyframe, ordenados por posição, seguida da declaração .animated-element. Os keyframes saem por posição mesmo quando foram adicionados em outra ordem; a lista mantém a sua ordem e mostra a posição em cada item.
A forma curta é animation: <nome> <duração>ms <função> 0ms <repetições> both. Dois keyframes podem compartilhar a posição: os dois blocos são exportados e o último com o mesmo percentual é impresso por último.
Adicionar keyframe divide o maior intervalo e arredonda o ponto médio: a partir dos três iniciais os próximos caem em 25, 75, 13, 38 e 63% (lista final 0, 13, 25, 38, 50, 63, 75, 100). Com oito keyframes Adicionar é desativado; com dois, Remover avisa que são necessários pelo menos dois.
Os limites são aplicados ao sair do campo: 150 vira 100, -50 vira 0, opacidade 3 vira 1, escala 5 vira 4, translate 400px vira 300px e rotate 900deg vira 720deg. Esvaziar um campo restaura o valor anterior. A lista, os marcadores da linha do tempo e a exportação usam sempre os números guardados, então um keyframe em 150% não é mais descartado pelo analisador de CSS.
Somente transform e opacity são animados por keyframe: não há cor, filtro ou fundo por keyframe, nem animation-delay, direction, fill ou play-state, e a classe exportada é sempre .animated-element. Tudo roda na página: mexer nos controles não envia nenhuma requisição de rede.
A aceleração vem do menu; a entrada overshoot imprime cubic-bezier(0.34, 1.56, 0.64, 1) em vez da palavra. Não há arraste na linha do tempo, exportação para GIF ou vídeo, nem um segundo elemento para comparar; posições repetidas são permitidas e os dois blocos são exportados.