Generador de animación de fotogramas clave CSS

Una regla CSS @keyframes es en realidad una pequeña línea de tiempo: un conjunto de puntos de control porcentuales, cada uno de los cuales declara cómo debería verse una propiedad en ese momento exacto, con el navegador interpolando todo lo demás. Construir uno a mano significa tener varios de estos puntos de control porcentuales en tu cabeza a la vez en varias propiedades; este generador convierte esa línea de tiempo en algo que realmente puedes ver y arrastrar: un carril horizontal por propiedad, con un marcador de parada en cada punto de control.

La pieza central es el cabezal de reproducción Scrub. Arrástrelo a cualquier punto entre 0% y 100% y el cuadro de vista previa salta al estado combinado exacto en ese instante: no el fotograma clave más cercano, sino un valor real interpolado linealmente calculado entre las dos paradas que rodean el cabezal de reproducción en cada pista activa. Las propiedades numéricas como posición, rotación y escala se interpolan como números simples; background-color interpola cada canal rojo, verde y azul de forma independiente, lo que hace que una pista de color se desvanezca suavemente a través de tonos intermedios en lugar de saltar entre los colores que realmente configuraste.

Múltiples pistas se combinan automáticamente en una animación coherente: cada propiedad basada en transformación (mover, rotar, escalar) se fusiona en una única declaración de transformación en cada porcentaje de fotograma clave, mientras que la opacidad y el color de fondo permanecen en sus propias líneas, exactamente como se vería el CSS real escrito a mano. Los porcentajes en los que una pista determinada no tiene una parada explícita simplemente se omiten intencionadamente en las declaraciones de esa propiedad: la propia interpolación de fotogramas clave del navegador llena el espacio entre las paradas que existen, de la misma manera que lo haría con cualquier regla @keyframes escrita a mano.

Cinco ajustes preestablecidos (rebotar, agitar, pulsar, desvanecer y deslizar) cargan una línea de tiempo completa y lista para modificar (que incluye una duración sensible, función de sincronización y recuento de repeticiones) con un solo clic. Presione Reproducir en cualquier momento para ver la animación CSS real ejecutada en el elemento de vista previa, generada sobre la marcha a través de una hoja de estilo inyectada dinámicamente, luego copie el bloque @keyframes completo más la taquigrafía .animated-element {animación:...} directamente en su propio proyecto. Como todas las herramientas de este sitio, todo se ejecuta localmente en el navegador y nunca se carga nada.