Generador de animación CSS
Cree animaciones de fotogramas clave CSS a partir de ajustes preestablecidos como desvanecimiento, deslizamiento, rebote y giro. Ajuste la duración, la flexibilización, el retraso, la iteración y la dirección, obtenga una vista previa en vivo y luego copie los fotogramas clave y la taquigrafía de la animación.
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}¿qué es el 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 cualquier pieza que coincida con su valor predeterminado CSS para que la salida siga siendo legible. 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.
¿cómo utilizar el generador de animación CSS?
Elija un ajuste preestablecido de animación
Elija un movimiento de la lista preestablecida, como desvanecerse, deslizarse, hacer zoom, rebotar, girar, pulsar o agitar. Cada ajuste preestablecido carga sus fotogramas clave y una duración y flexibilización predeterminadas razonables.
Ajusta el tiempo y la reproducción
Establezca la duración y el retraso, elija una función de sincronización, decida si la animación se repite un número fijo de veces o infinitamente, y elija una dirección y un modo de llenado.
Vista previa y repetición
Mire cómo se ejecuta la animación en el elemento de vista previa y presione reproducir para reiniciarla. Debido a que una animación se ejecuta en el montaje, la reproducción vuelve a montar el elemento para que pueda verlo tantas veces como desee.
Copiar el CSS
Copie la regla @keyframes generada y la taquigrafía de la animación, luego péguelas en su hoja de estilo y aplique la clase a cualquier elemento.
Características clave
Biblioteca preestablecida de fotogramas clave
Catorce movimientos listos para usar que cubren entradas, salidas y efectos de bucle, desde desvanecimiento y deslizamiento hasta rebote, giro, pulso, sacudida, giro y latidos del corazón, cada uno definido con paradas reales del fotograma clave
Control total de reproducción
Configure la duración, el retraso, la función de sincronización, el recuento de iteraciones, la dirección, el modo de llenado y el estado de reproducción, y vea cada cambio reflejado en la taquigrafía y la vista previa en vivo a la vez
Marcos clave y taquigrafía juntos
El resultado incluye tanto la regla @keyframes como la taquigrafía de animación que se vincula a ella, por lo que copias un bloque de trabajo completo en lugar de la mitad de uno
Salida limpia y con especificaciones correctas
La taquigrafía se escribe primero con el nombre del fotograma clave, el retraso se reduce cuando es cero y se omite cualquier valor predeterminado, por lo que el CSS generado lee la forma en que lo escribiría a mano
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!