Generador de animaciones CSS con keyframes
Crea animaciones CSS personalizadas con keyframes. Configura duración, aceleración, dirección y modo de relleno.
Ejecutar herramienta
Genera código CSS listo para usar con animaciones basadas en fotogramas clave (@keyframes). Configura el nombre del efecto, la duración en segundos, la función de temporización (como ease o linear), la dirección de reproducción y el modo de relleno. La animación predeterminada comienza con opacidad cero y un desplazamiento hacia abajo de 20 píxeles al 0%, y termina con opacidad total y posición original al 100%. Si no escribes un nombre, el generador usa 'myAnimation'. Los valores por defecto son: duración 1 segundo, aceleración ease, dirección normal y modo de relleno none. Al hacer clic en 'Generar', obtienes el bloque CSS completo para copiar en tu hoja de estilos. Ideal para dar vida a elementos web sin escribir código desde cero.
Instrucciones
- Escribe el nombre de la animación o déjalo en blanco para usar el valor por defecto.
- Indica la duración en segundos para definir el tiempo total del ciclo.
- Selecciona la función de temporización (por ejemplo, ease, linear, ease-in-out).
- Elige la dirección (normal, reverse, alternate, alternate-reverse) y el modo de relleno (none, forwards, backwards, both).
- Haz clic en 'Generar' para obtener el código CSS con la regla @keyframes y la propiedad animation.
Ejemplos
- Aparición gradual rápida: escribe 'aparecerElemento' como nombre, duración 0.5 segundos, aceleración 'ease-out', dirección 'normal' y modo de relleno 'forwards'. El código generado mantiene el elemento visible al final de la animación.
- Transición suave en bucle: configura 'deslizarSuave', duración 2 segundos, aceleración 'ease-in-out', dirección 'alternate' y modo de relleno 'both'. La animación se reproduce de ida y vuelta sin cortes.
Preguntas frecuentes
¿Qué ocurre si no indico ningún nombre de animación?
Si dejas el campo vacío, el generador asigna automáticamente el nombre 'myAnimation' tanto en la regla @keyframes como en la propiedad animation del elemento.
¿En qué unidad se expresa el tiempo de duración?
La duración se expresa en segundos. El valor que introduces se añade directamente con el sufijo 's' en la propiedad CSS animation-duration.
¿Qué cambios visuales incluye la animación generada?
La animación predeterminada pasa de opacidad 0 con un desplazamiento vertical de 20 píxeles hacia abajo (0%) a opacidad total y posición original (100%). Puedes modificar estos valores editando el código generado.