Cómo usar: Generador de Keyframes CSS
- Elige un preajuste (pasa el cursor sobre las miniaturas para previsualizarlos) o empieza con un keyframe en blanco.
- Define la duración, el retardo, las repeticiones, la función de temporización y el disparador (carga, hover, clic, scroll).
- Edita los keyframes en la línea de tiempo: haz clic para añadir uno, arrástralo para moverlo y luego ajusta sus propiedades con los controles deslizantes.
- Desplázate por la animación, ralentízala o activa el papel cebolla para afinar los detalles, y después copia el CSS, Tailwind o HTML.
Cómo funcionan los @keyframes
Una regla @keyframes enumera los estilos que debe tener un elemento en puntos concretos de la animación, expresados en porcentajes (from equivale al 0%, to al 100%). El navegador interpola todo lo que hay entre medias. Los keyframes con estilos idénticos pueden compartir selector, como en 0%, 100% { … }, y cada keyframe puede definir su propia animation-timing-function para el tramo que le sigue.
Qué puedes crear
- Línea de tiempo de keyframes: añade todos los keyframes que quieras, arrástralos a nuevos porcentajes y asigna a cada uno su propio suavizado.
- Propiedades: traslación X/Y, rotación, rotación 3D X/Y, escala, sesgo, opacidad, desenfoque, brillo (box-shadow), color de fondo y radio del borde. Los valores que faltan se interpolan, así que las transformaciones nunca saltan.
- Disparadores: al cargar, al pasar el cursor, al hacer clic, al entrar en pantalla con scroll o una animación controlada por scroll solo con CSS.
- Escalonado: anima una lista elemento a elemento con una sola propiedad personalizada de CSS.
- Inspección: pausa, avanza cuadro a cuadro, ralentiza a ¼ de velocidad y activa el papel cebolla para ver todos los keyframes a la vez.
- Exportación: abreviatura o forma desglosada de CSS, HTML, JavaScript, Tailwind v3 y v4, un mixin de SCSS, un archivo de demo independiente o un enlace para compartir.
La abreviatura de animation
| Parte | Ejemplo | Significado |
|---|---|---|
| nombre | fade-in-up | La regla @keyframes que se ejecuta |
| duración | 0.6s | Duración de un ciclo |
| función de temporización | cubic-bezier(.33,1,.68,1) | Curva de velocidad entre keyframes |
| retardo | 0.2s | Espera antes de empezar; los valores negativos empiezan a mitad de la animación |
| número de iteraciones | infinite | Cuántos ciclos se ejecutan |
| dirección | alternate | Reproduce hacia atrás en cada ciclo alterno |
| modo de relleno | both | Mantiene el primer fotograma antes y el último después de reproducirse |
Accesibilidad
Algunas personas se marean o sienten náuseas con el movimiento. Con Respect prefers-reduced-motion activado, el CSS desactiva la animación para los visitantes que hayan activado “reducir movimiento” en su sistema operativo. Evita parpadeos de más de tres veces por segundo y mantén las animaciones en bucle sutiles o da a los usuarios una forma de pausarlas.
Consejos de rendimiento
Anima transform y opacity en lugar de top, left, width o margin, que fuerzan un recálculo del diseño en cada fotograma. Añade will-change solo a los elementos que vayan a animarse. Ajusta tu suavizado con el generador de cubic-bezier, añade un spinner desde el generador de cargadores CSS y combina las animaciones con sombras o degradados.
También se busca como: keyframes css, @keyframes generator, editor de keyframes css, animaciones css keyframes, generador de animaciones css, editor de línea de tiempo css.
Herramientas que combinan con: Generador de Keyframes CSS
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
- Generador de efectos hover CSS — Diseña animaciones hover para botones, tarjetas, enlaces e iconos.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- Convertidor PX a REM — Convierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa y convierte todos los valores px de una vez.
Preguntas frecuentes
¿Puedo usar el CSS generado gratis?
¿Puedo editar una animación que ya tengo?
¿Cómo inicio la animación cuando el elemento entra en pantalla al hacer scroll?
animation-timeline: view() sin JavaScript en los navegadores que lo soporten.¿Funciona con Tailwind CSS?
tailwind.config.js para la v3 y un bloque @theme para la v4, así que puedes usar la animación como una clase animate-*.¿Qué propiedades son mejores para una animación fluida?
transform y opacity se ejecutan en el compositor de la GPU y se mantienen fluidas incluso en móviles lentos. El desenfoque, las sombras, los colores y el radio del borde cuestan más, así que úsalos con moderación en elementos grandes.