Generador de animación CSS

El generador de animación CSS es un editor visual para animaciones de fotogramas clave CSS. Elige un ajuste preestablecido de movimiento como desvanecerse, deslizarse, hacer zoom, rebotar, girar o pulsar, ajusta la duración, la función de sincronización, el retraso, el recuento de iteraciones, la dirección y el modo de llenado, lo ves ejecutar en una vista previa en vivo y luego copias dos cosas: la regla @keyframes que define el movimiento y la taquigrafía de animación que lo reproduce. Convierte un bloque de CSS que la mayoría de la gente copia de la memoria o de un marco en algo que puedes darle forma y ver antes de que llegue a tu hoja de estilo.

Una animación CSS tiene dos mitades que deben estar de acuerdo. La regla @keyframes nombra una secuencia de pasos, cada uno escrito como un porcentaje de compensación con los valores de propiedad que el elemento debe mantener en ese punto, por ejemplo 0% en opacidad 0 y 100% en opacidad 1. La propiedad de animación luego hace referencia a ese nombre de fotograma clave y controla cómo se reproduce: cuánto dura, cómo se facilita, cuánto tiempo esperar antes de comenzar, cuántas veces repetir y en qué dirección se ejecuta cada pase. Un nombre mal escrito es la razón más común por la que una animación no hace nada en silencio, porque el navegador no tiene una regla a la que vincularse.

Todo se ejecuta en tu navegador. Elija un ajuste preestablecido, arrastre los controles deslizantes de duración y retardo, cambie la curva de flexibilización, configure la animación para que se repita para siempre o un número fijo de veces y presione reproducir para verla nuevamente. La herramienta escribe la taquigrafía en un orden seguro con el nombre del fotograma clave primero, elimina el retraso cuando es cero y omite la dirección cuando es normal y el modo de llenado cuando no es ninguno, por lo que la salida permanece legible. El recuento de iteraciones y la función de sincronización siempre se escriben, incluso en sus valores predeterminados. No hay cuenta, no se carga nada y el generador sigue funcionando una vez que se ha cargado la página.

También hace visibles las compensaciones de rendimiento. Los ajustes preestablecidos animan la transformación y la opacidad siempre que sea posible, porque esas dos propiedades son manejadas por el compositor y no obligan al navegador a recalcular el diseño, por lo que se mantienen fluidos a altas velocidades de fotogramas. Animar ancho, alto, parte superior o margen recalcula la página en cada fotograma y es la causa habitual de tartamudez. Ver un rebote construido desde TranslateY en lugar de arriba es una lección más rápida de por qué uno es fluido que cualquier lectura al respecto.

Esto es lo que produce este generador de animación CSS para un ajuste preestablecido, por lo que puede compararlo con su propia copia. Haga clic en Rebote y los controles se cargan 1200 ms, facilidad e Infinito, mientras que el modo de llenado permanece en su valor predeterminado de ambos. Copiar CSS le brinda la regla de rebote de siete paradas @keyframes más una regla de elementos animados que contiene animación: rebote 1,2s facilidad infinita en ambos;. Arrastre el retraso a 300 ms y la taquigrafía se convierte en rebote 1,2 ms facilidad 0,3 ms infinito en ambos, con el retraso colocado después de la función de sincronización. Cualquier salida CSS del generador de animación debe seguir ese orden, porque el primer valor de tiempo siempre se lee como duración.