Generador de Fotogramas Clave de Animación
Crea animaciones CSS @keyframes visualmente con nuestro generador interactivo de fotogramas clave. Añade varias paradas de fotograma clave, define opacidad, posición, rotación, escala y color en cada parada, y luego previsualiza la animación y copia el CSS.
Preview
Settings
Keyframe Stops (5)
@keyframes anim-anff {
0% {
opacity: 1;
background-color: #6366f1;
}
25% {
opacity: 0.8;
transform: translate(50px, -20px) rotate(45deg) scale(1.2);
background-color: #8b5cf6;
}
50% {
opacity: 1;
transform: translate(100px, 0px) rotate(90deg);
background-color: #a855f7;
}
75% {
opacity: 0.8;
transform: translate(50px, 20px) rotate(45deg) scale(1.2);
background-color: #d946ef;
}
100% {
opacity: 1;
background-color: #6366f1;
}
}
.element {
animation: anim-anff 2s ease-in-out infinite;
/* Add your element styles here */
}¿Por qué usar nuestro generador de fotogramas clave de animación?
- Creador visual de fotogramas clave: añade y organiza paradas de fotograma clave en cualquier punto porcentual (0 %-100 %) con una interfaz visual intuitiva. Cada parada admite opacidad, translate (X/Y), rotate, scale y background-color, todo ajustable con deslizadores y selectores de color.
- Vista previa de animación en tiempo real: observa tu animación cobrar vida con un panel de vista previa que reproduce los fotogramas clave en tiempo real. Ajusta duración, easing y número de iteraciones al instante: la vista previa se actualiza sin recargar la página.
- Salida CSS @keyframes limpia: obtén reglas CSS @keyframes correctamente formateadas con todas tus propiedades de animación incluidas. El generador solo emite las propiedades que realmente se usan, sin declaraciones innecesarias. Copia todo el CSS de la animación con un clic.
- 100 % privado y gratis: toda la generación de animaciones y el renderizado de la vista previa ocurren localmente en tu navegador. No se envían datos a ningún servidor, no se requiere registro y no hay límites de uso. Úsalo en cualquier proyecto: personal, comercial o para clientes.
Casos de uso comunes del generador de fotogramas clave de animación
- Animaciones de landing page: crea animaciones de entrada atractivas para secciones hero, botones de llamada a la acción y tarjetas de características. Usa efectos de fade-in, slide-up o scale para llamar la atención sobre elementos clave y mejorar la interacción del usuario.
- Indicadores de carga y progreso: diseña animaciones de carga personalizadas, indicadores de progreso y efectos de pantalla esqueleto. Las animaciones de fotogramas clave son perfectas para crear estados de carga llamativos que mantienen al usuario atento mientras carga el contenido.
- Microinteracciones y retroalimentación: añade retroalimentación de movimiento sutil a elementos de interfaz como botones, interruptores y campos de formulario. Un breve rebote o transición de color al pasar el ratón o hacer clic ofrece una retroalimentación visual satisfactoria que mejora la experiencia de usuario.
- Navegación estilo app móvil: implementa transiciones de navegación tipo móvil, como menús que se deslizan, hojas inferiores que se despliegan y animaciones de barra de pestañas. Las animaciones de fotogramas clave hacen que la web móvil se sienta nativa y cuidada.
- Animaciones para boletines por correo: crea animaciones CSS para boletines que funcionen en los clientes de correo compatibles. Sencillas animaciones de opacity y transform pueden hacer que tus campañas destaquen en bandejas saturadas.
- Prototipado y pruebas de diseño: prototipa rápidamente ideas de animación en la fase de diseño sin escribir código. Experimenta con tiempos, easing y combinaciones de propiedades para encontrar el movimiento perfecto para tu sistema de diseño.
¿Qué son las animaciones CSS @keyframes?
CSS @keyframes es una potente regla at-rule de CSS que te permite definir animaciones complejas especificando valores de propiedades en varios puntos (fotogramas clave) a lo largo de una línea temporal. A diferencia de las transiciones CSS, que solo animan entre dos estados (inicio y fin), las animaciones de fotogramas clave pueden tener varios estados intermedios, lo que permite secuencias de movimiento sofisticadas como rebotes, ciclos de color y transformaciones de varios pasos.
Cada parada de fotograma clave se define como un porcentaje de la duración total de la animación, de 0 % (el inicio) a 100 % (el fin). En cada parada defines los valores de las propiedades CSS que el elemento animado debe tener en ese punto. El navegador interpola automáticamente (suaviza) los valores entre paradas, creando un movimiento fluido. Puedes controlar la función de temporización por animación o por fotograma clave para un control preciso del comportamiento del easing.
Cómo funciona nuestro generador de fotogramas clave de animación
Nuestro generador ofrece una interfaz visual para crear animaciones @keyframes sin escribir código CSS a mano. Así es como funciona:
- Añade paradas de fotograma clave: empieza con las paradas predeterminadas o elige una animación preajustada (Fade In, Slide In, Bounce, Spin & Scale, Color Cycle, Wobble). Cada parada representa un punto en la línea temporal de la animación. Puedes añadir hasta 10 paradas y ajustar sus posiciones con el deslizador de porcentaje.
- Configura las propiedades por parada: para cada parada de fotograma clave, ajusta la opacidad, la posición horizontal y vertical (translate), la rotación, la escala y el color de fondo con los deslizadores y el selector de color. El elemento de vista previa animado se actualiza en tiempo real mientras ajustas los valores.
- Define los parámetros de la animación: usa el deslizador de duración (0,1 s a 10 s) para controlar la velocidad, elige una función de easing (Linear, Ease, Bounce, etc.) y define el número de iteraciones (1-10 o infinito). Haz clic en Play para ver tu animación en acción y luego copia el CSS generado.
Propiedades de los fotogramas clave explicadas
- Opacity: controla la transparencia del elemento en cada parada de fotograma clave. Los valores van de 0 (completamente transparente) a 1 (totalmente opaco). Usa opacity para efectos de fade-in, fade-out y pulsación.
- Translate X/Y (px): mueve el elemento horizontal y verticalmente desde su posición original. Los valores negativos mueven a la izquierda/arriba y los positivos a la derecha/abajo. Combínalo con otras transformaciones para animaciones de deslizamiento, rebote y flotación.
- Rotate (deg): rota el elemento en sentido horario (positivo) o antihorario (negativo) alrededor de su centro. Úsalo para efectos de giro, oscilación y balanceo. Se admiten valores entre -360 y 360 grados.
- Scale: cambia el tamaño del elemento respecto a su tamaño original. Un valor de 1 es el tamaño normal, 0,5 la mitad y 2 el doble. Combínalo con opacity para efectos de entrada llamativos.
- Color de fondo: define el color de fondo del elemento en cada parada. El navegador interpola suavemente entre colores, lo que permite efectos de ciclo de color y transiciones de ambiente.
- Orden de transformaciones: cuando se usan varias funciones de transformación, se aplican en orden: primero translate, luego rotate y después scale. Este orden afecta al resultado visual final y el CSS generado lo maneja correctamente.
Privacidad, seguridad y disponibilidad
Tu privacidad es nuestra prioridad. El generador de fotogramas clave de animación procesa todo localmente en tu navegador usando el renderizado CSS integrado en el motor del navegador. No se envían datos a ningún servidor: tus ajustes de animación y configuraciones de fotogramas clave nunca salen de tu dispositivo. La herramienta es completamente gratis, sin registro, sin límites de uso y sin restricciones ocultas. Úsala con confianza en proyectos personales, sitios comerciales o trabajos para clientes.
Preguntas frecuentes
Las transiciones CSS animan entre dos estados (inicio y fin) cuando ocurre un desencadenante. Las animaciones CSS @keyframes pueden tener varias paradas intermedias, lo que permite secuencias complejas de varios pasos que pueden ejecutarse automáticamente al cargar la página con control de iteraciones.
La velocidad de la animación se controla con la propiedad duration. Usa el deslizador de duración para establecer valores entre 0,1 s y 10 s. La función de easing también afecta a la velocidad percibida: ease-in empieza lento, ease-out termina lento y linear mantiene velocidad constante.
Una función de easing controla la aceleración y desaceleración entre paradas de fotogramas clave. Linear es velocidad constante. Ease empieza rápido y luego se frena a mitad. Ease-in empieza lento y acelera. Ease-out empieza rápido y desacelera. Ease-in-out combina inicios y finales suaves.
Puedes añadir hasta 10 paradas de fotograma clave. Dos paradas (0 % y 100 %) es el mínimo para una animación simple, mientras que 5-8 paradas permiten secuencias complejas de varios pasos con distintos valores de opacidad, posición, rotación, escala y color en cada parada.
Sí, el CSS generado es CSS estándar que funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge, Opera). Para el mejor rendimiento, usa transform y opacity para animaciones fluidas a 60 fps que aprovechan la aceleración por GPU.
Iteración infinita significa que la animación se repite continuamente. Es útil para efectos de fondo, spinners de carga, indicadores rebotantes y movimiento decorativo. También puedes elegir un número concreto de repeticiones (1-10) para animaciones de entrada.
Sí, el generador de fotogramas clave de animación es completamente gratis y sin restricciones. Sin registro, sin límites de uso y sin costes ocultos. Todo el procesamiento ocurre localmente en tu navegador.