La página se abre como @keyframes kivMotion a 1400 ms, ease, una iteración y fotogramas en 0%, 50% y 100%, y cada fotograma lleva su propia posición, desplazamiento, giro, escala y opacidad. La vista previa reproduce la misma declaración animation que imprime la exportación y los dos bloques salen ordenados por posición.
Se ejecuta localmente en tu navegadorLa página se abre como @keyframes kivMotion a 1400 ms, ease, una iteración y fotogramas en 0%, 50% y 100%. La vista previa usa la misma declaración animation que imprime el panel de salida: lo que reproduces es lo que copias.
Cada control numérico tiene un límite medido: duración 100-20000 ms, posición 0-100%, opacidad 0-1, desplazamiento ±300 px, rotación ±720°, escala 0-4 y entre dos y ocho fotogramas. Un valor fuera de rango se escribe de vuelta al límite al salir del campo; un campo vacío recupera el valor anterior en lugar de pasar a cero.
La exportación contiene la regla @keyframes con un bloque por fotograma, ordenados por posición, y después la declaración .animated-element. Los fotogramas se imprimen por posición aunque se hayan añadido en otro orden; la lista conserva tu orden y muestra la posición en cada entrada.
La forma corta es animation: <nombre> <duración>ms <función> 0ms <repeticiones> both. Dos fotogramas pueden compartir posición: se exportan ambos bloques y el último con el mismo porcentaje se imprime al final.
Añadir fotograma divide el hueco más ancho y redondea el punto medio: desde los tres iniciales los siguientes caen en 25, 75, 13, 38 y 63% (lista final 0, 13, 25, 38, 50, 63, 75, 100). Con ocho fotogramas Añadir se desactiva; con dos, Eliminar avisa de que se necesitan al menos dos.
Los límites se aplican al salir del campo: 150 se guarda como 100, -50 como 0, opacidad 3 como 1, escala 5 como 4, translate 400px como 300px y rotate 900deg como 720deg. Vaciar un campo recupera su valor anterior. La lista, los marcadores de la línea de tiempo y la exportación llevan siempre los números guardados, así que el analizador de CSS ya no descarta un fotograma al 150%.
Solo se animan transform y opacity por fotograma: no hay color, filtro ni fondo por fotograma, ni animation-delay, direction, fill o play-state, y la clase exportada es siempre .animated-element. Todo se ejecuta en la página: mover los controles no envía ninguna petición de red.
La aceleración se elige en el menú; la entrada overshoot imprime cubic-bezier(0.34, 1.56, 0.64, 1) en lugar de la palabra. No hay arrastre en la línea de tiempo, ni exportación a GIF o vídeo, ni un segundo elemento para comparar; se permiten posiciones repetidas y se exportan ambos bloques.