Generador de animaciones CSS @keyframes con vista previa
Crea animaciones CSS @keyframes controlando duración, timing, iteraciones y dirección. Vista previa en vivo y copia con un clic. Gratis, sin subida y se ejecuta enteramente en tu navegador.
Cómo usar esta herramienta
- Establece el nombre de la animación, duración, función de temporización y otras propiedades.
- Haz clic en Reproducir para previsualizar la animación en el elemento de demostración.
- Copia la clase CSS generada y el bloque @keyframes.
.fade-in {
animation-name: fade-in;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}The keyframe template shows a fade-in-up effect. Edit the @keyframes block to customise the animation. Everything runs in your browser.
Acerca de Generador de animaciones CSS
El generador de animaciones CSS monta un bloque @keyframes completo y su clase correspondiente sin que tengas que escribir la sintaxis a mano. Defines el nombre de la animación, la duración en segundos, la función de tiempo (timing), el retardo, el número de iteraciones, la dirección y el modo de relleno (fill mode) usando campos de formulario y desplegables normales. La salida es una regla CSS lista para usar más un bloque @keyframes correspondiente, y ambos se actualizan en vivo cuando cambias cualquier ajuste. El campo de nombre pasa automáticamente a minúsculas y une las palabras con guiones para que siga siendo un identificador CSS válido.
Los controles se corresponden directamente con las propiedades de animación de CSS. La función de tiempo ofrece ease, linear, las tres variantes ease-in/out y un preajuste de cubic-bezier. La dirección cubre normal, reverse, alternate y alternate-reverse, mientras que el modo de relleno ofrece none, forwards, backwards y both. El número de iteraciones es un campo de texto libre, para que puedas introducir un número como 1 o 3, o la palabra clave infinite, exactamente lo que CSS acepta en esa posición.
Un botón de Reproducir vista previa anima un cuadrado de demostración para que percibas el ritmo y la dirección antes de decidir. La vista previa usa un keyframe integrado de aparición ascendente: el elemento se desvanece desde transparente mientras se desliza veinte píxeles hacia arriba, y respeta la duración, el retardo, el timing, las iteraciones, la dirección y el modo de relleno que hayas elegido. Como la vista previa se reinicia cuando pulsas Reproducir, puedes ajustar el ritmo con rapidez sin recargar nada.
El bloque @keyframes generado incluye esa misma plantilla de aparición ascendente como punto de partida, con pasos de opacidad y transform al 0 % y al 100 %. Está pensado para editarse; una vez pegas la salida, puedes reescribir los pasos del keyframe para describir cualquier movimiento que necesites, manteniendo las propiedades de tiempo que produjo la herramienta. Un botón de Copiar pone el fragmento completo en tu portapapeles. Todo se ejecuta enteramente en tu navegador, sin subida ni cuenta.
Preguntas frecuentes
- ¿Qué propiedades de animación puedo controlar?
- Nombre, duración, función de tiempo, retardo, número de iteraciones, dirección y modo de relleno. Cada una se corresponde con su propiedad animation-* de CSS, y la regla generada y el bloque @keyframes se actualizan en vivo conforme las cambias.
- ¿Qué muestra el botón de Reproducir vista previa?
- Ejecuta la animación sobre un cuadrado de demostración usando tus ajustes actuales. La vista previa emplea un movimiento integrado de aparición ascendente, desvaneciéndose mientras se desliza hacia arriba, para que juzgues el ritmo, el retardo y la dirección antes de copiar el código.
- ¿Puedo crear un movimiento distinto de la aparición ascendente?
- Sí. El bloque @keyframes generado usa la aparición ascendente como plantilla de partida, pero está pensado para editarse. Tras pegarlo, reescribe los pasos dentro de @keyframes para describir cualquier movimiento, manteniendo las propiedades de tiempo que montó la herramienta.
- ¿Qué puedo introducir en el número de iteraciones?
- Cualquier valor que CSS acepte en esa posición: un número como 1, 2 o 3 para repetir un número fijo de veces, o la palabra clave infinite para repetir de forma continua. Es un campo de texto libre precisamente por eso.
- ¿Qué funciones de tiempo están disponibles?
- ease, linear, ease-in, ease-out, ease-in-out y un preajuste cubic-bezier(0.4, 0, 0.2, 1). La función elegida se escribe en animation-timing-function y se aplica en la vista previa.
- ¿Por qué cambia el nombre de mi animación mientras escribo?
- El campo de nombre normaliza lo que introduces a un identificador CSS válido pasándolo a minúsculas y sustituyendo los espacios por guiones. Así la clase y el nombre del @keyframes generados quedan utilizables sin limpieza manual.
- ¿Qué hacen la dirección y el modo de relleno?
- La dirección controla si cada ciclo se reproduce hacia delante, en reversa o alternando. El modo de relleno controla si el elemento conserva los estilos de inicio o de fin de la animación antes y después de ejecutarse; both y forwards son habituales para mantener el estado final.
- ¿Esto se ejecuta en un servidor?
- No. El CSS se genera y se previsualiza enteramente en tu navegador. Nada se sube y no hace falta cuenta.