Generador de animaciones CSS
Crea animaciones CSS con keyframes a partir de efectos listos de fundido, deslizamiento, zoom, rotación y llamada de atención. Ajusta la duración, el retardo, la aceleración, el número de repeticiones, la dirección y el modo de relleno mientras un elemento en vivo reproduce el resultado, y luego copia un bloque @keyframes completo y la regla animation para tu hoja de estilos. Es útil para animaciones de entrada, indicadores de carga, respuestas al pasar el cursor, avisos y secciones destacadas, y todo se ejecuta localmente en el navegador.
- Elige entre efectos predefinidos de fundido, deslizamiento, zoom, rotación y llamada de atención
- Ajusta en vivo la duración, el retardo, la función de temporización, las repeticiones, la dirección y el modo de relleno
- Observa un elemento de demostración que reproduce la animación en bucle, con controles de repetición y pausa
- Copia un bloque @keyframes completo más la forma abreviada de animation, listo para pegar
- Todo se ejecuta localmente en el navegador, así que no se sube nada mientras diseñas
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 24px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animated-element {
animation: fadeInUp 1000ms ease 0ms infinite normal both;
}Resumen
Coloca los keyframes y el movimiento que producen uno al lado del otro, para que una animación sea algo que observas y ajustas en lugar de un bloque de CSS que escribes a ciegas y recargas para comprobar.
- 01
Una biblioteca de efectos curada
Parte de efectos con nombre agrupados en fundidos, deslizamientos, zooms, llamadas de atención y rotaciones, en vez de escribir cada keyframe desde un archivo en blanco.
- 02
Vista previa en bucle en vivo
Un elemento de demostración reproduce la animación seleccionada en bucle, con repetición y pausa, así que juzgas el movimiento real y no una descripción estática.
- 03
Control completo de la animación
Ajusta la duración, el retardo, la función de temporización, el número de repeticiones, la dirección y el modo de relleno, y observa cómo cada cambio surte efecto al instante.
- 04
Salida estándar, lista para copiar
El resultado es un bloque @keyframes real y una forma abreviada de animation con nombres de propiedad CSS normales, lista para pegar en cualquier hoja de estilos.
- 05
Aceleración incorporada
Elige entre las palabras clave de CSS o una cubic-bezier con efecto de resorte, de modo que los mismos keyframes puedan verse suaves, ágiles o con rebote.
- 06
Privado por diseño
La biblioteca, la vista previa y la generación de CSS se ejecutan localmente en el navegador, así que el trabajo de interfaz sin publicar nunca sale de tu equipo.
Cómo usarla
Convierte una idea aproximada de cómo debe aparecer o reaccionar un elemento en una animación CSS completa y lista para copiar.
- 01
Elige de la biblioteca un efecto cercano al movimiento que tienes en mente.
- 02
Ajusta la duración y el retardo hasta que la animación se reproduzca a un ritmo que sienta bien.
- 03
Elige una función de temporización y observa cómo cambia la sensación de los mismos keyframes.
- 04
Ajusta el número de repeticiones, la dirección y el modo de relleno para controlar cómo se repite y termina la animación.
- 05
Usa la repetición para volver a ver el movimiento y luego copia los @keyframes y la forma abreviada en tu hoja de estilos.
Detalles
Una animación es más que una curva de aceleración, así que el generador cubre tanto los keyframes que definen el movimiento como las propiedades que controlan cómo se ejecuta.
- Una biblioteca de efectos con nombre agrupados en categorías de fundido, deslizamiento, zoom, atención y rotación
- Un elemento de demostración en bucle para juzgar cada efecto como movimiento real y no por su nombre
- Controles de repetición y pausa para volver a ver o congelar la animación mientras la ajustas
- Deslizadores de duración y retardo que actualizan la vista previa en el instante en que cambian
- Ajustes predefinidos de función de temporización que cubren las palabras clave de CSS más una cubic-bezier con efecto de resorte
- Número de repeticiones que incluye un bucle infinito real para efectos ambientales y en bucle
- Control de dirección para reproducción normal, inversa, alterna y alterna inversa
- Control del modo de relleno para que el elemento mantenga su estado inicial o final antes y después de ejecutarse
- Una salida que combina un bloque @keyframes completo con la forma abreviada de animation correspondiente
- Generación totalmente local en el navegador, para que el movimiento confidencial de la interfaz siga siendo privado
Casos de uso
La animación guía la atención, indica el estado y aporta pulido, pero el efecto adecuado depende de qué ocurre y por qué. Probarlo contra un elemento en vivo es la forma más rápida de decidir qué encaja.
-
Animaciones de entrada
Los efectos de fundido, deslizamiento y zoom hacen aparecer los elementos en pantalla con suavidad a medida que el contenido carga o entra al hacer scroll.
-
Atención y respuesta
La sacudida, el pulso y el rebote atraen la vista hacia un error, un mensaje nuevo o un botón que necesita una respuesta.
-
Carga y movimiento ambiental
Un giro o pulso infinito mantiene vivos los indicadores de carga y de espera sin exigir que el usuario los note.
-
Pulido de hover e interacción
Un zoom o bamboleo rápido al pasar el cursor o hacer clic hace que los elementos interactivos se sientan ágiles e intencionados.
-
Avisos y notificaciones
Desliza un aviso desde un borde y haz que se asiente, para que los mensajes entrantes se lean como que llegan en lugar de aparecer de la nada.
-
Marketing y secciones destacadas
Los fundidos y deslizamientos escalonados en una landing page dan a la sección destacada ritmo y la sensación de estar diseñada.
-
Aprender animaciones CSS
Leer los @keyframes generados junto al resultado en vivo es una forma clara de entender cómo la sintaxis de la animación se traduce en movimiento.
-
Construir un sistema de movimiento
Fija un conjunto reducido de animaciones con nombre reutilizables para que el movimiento de todo el producto comparta una misma sensación coherente.
Ver también
La temporización de la animación se moldea con la aceleración, así que refina la curva en sí con el Generador de curvas Bézier cúbicas y, cuando un efecto también cambia la elevación, combínalo con la profundidad del Generador de sombras para que el movimiento y la sombra cambien juntos en vez de estorbarse.
Buenas prácticas
La animación es fácil de usar en exceso, así que unos pocos hábitos mantienen el movimiento con un propósito claro y coherente en lugar de recargado o molesto.
- Anima transform y opacity siempre que puedas, ya que son las propiedades más baratas de animar con suavidad para el navegador.
- Mantén las animaciones de entrada e interacción cortas, en torno a 200 a 500 ms, para que la interfaz siga siendo ágil de usar.
- Reserva las llamadas de atención como la sacudida y el rebote para momentos que realmente necesiten notarse.
- Usa un bucle infinito solo para movimiento ambiental como los indicadores de carga, no para contenido que el usuario está intentando leer.
- Ajusta la función de temporización a la intención: ease-out para las entradas y ease-in para las salidas.
- Usa el modo de relleno forwards o both cuando un elemento deba mantener su estado final después de que termine la animación.
- Respeta las preferencias de movimiento reducido atenuando o eliminando los movimientos grandes para quienes lo solicitan.
- Estandariza unas pocas animaciones con nombre en lugar de un conjunto único de keyframes para cada componente.
Limitaciones
Esta herramienta se centra en generar animaciones CSS con keyframes, así que algunas áreas relacionadas quedan fuera de su alcance de forma intencionada.
- Genera animaciones CSS @keyframes, no animaciones basadas en JavaScript o en librerías como la física de resortes.
- Los efectos animan un único elemento de demostración, así que confirma el escalonado y la secuencia entre varios elementos en tu propio diseño.
- Produce la animación, no el diseño que la rodea, así que la posición y el tamaño provienen de tu CSS existente.
- La vista previa usa un elemento de demostración fijo, así que verifica la sensación en tus componentes reales a su tamaño real.
- Las animaciones activadas por scroll y las de view-timeline son un mecanismo aparte y no se generan aquí.
- La fluidez percibida también depende de la tasa de fotogramas y de qué más se está repintando, algo que este editor no mide.
Preguntas frecuentes
Preguntas que surgen con más frecuencia al crear animaciones CSS y convertir un efecto en código de hoja de estilos listo para producción.
¿Qué es una animación CSS con keyframes?
Es una animación definida con una regla @keyframes que enumera cómo cambian las propiedades a lo largo de la línea de tiempo, y que luego se aplica a un elemento con la propiedad animation para controlar la duración, la aceleración, la repetición y más.
¿El CSS generado está listo para producción?
Sí. La salida es un bloque @keyframes estándar y una forma abreviada de animation que puedes pegar en cualquier hoja de estilos sin cambios. Puedes renombrar los keyframes o el selector para que encajen con tu código.
¿Qué hace el modo de relleno?
animation-fill-mode controla el aspecto del elemento antes y después de ejecutarse la animación. forwards mantiene el keyframe final, backwards aplica el primer keyframe durante el retardo y both hace ambas cosas.
¿Cómo hago que una animación se repita para siempre?
Pon el número de repeticiones en infinite. Combínalo con la dirección alternate para que la animación se invierta en cada ciclo en lugar de saltar al inicio, lo que va bien con pulsos y movimiento ambiental.
¿Cómo creo una animación CSS de fundido o deslizamiento de entrada?
Elige un ajuste de fundido o deslizamiento, ajusta la duración y la aceleración hasta que la vista previa se sienta bien, y luego copia los @keyframes y la regla animation generados. Puedes renombrar los keyframes y el selector antes de pegarlos en tu hoja de estilos.
¿Qué propiedades son las mejores para animar?
transform y opacity son las de mejor rendimiento porque el navegador puede animarlas sin un costoso trabajo de maquetación o repintado. La biblioteca las prioriza para que los efectos se mantengan fluidos.
¿Puedo cambiar la aceleración de un efecto?
Sí. Elige cualquier función de temporización, incluida una cubic-bezier con efecto de resorte, y los mismos keyframes se verán suaves, ágiles o con rebote según la curva que elijas.
¿Se sube algo mientras diseño?
No. La biblioteca de efectos, la vista previa en vivo y la generación de CSS se ejecutan localmente en el navegador, así que la herramienta es segura para interfaces de producto sin publicar y movimiento confidencial de la interfaz.
Herramientas relacionadas
El movimiento es una capa de una interfaz pulida. Con la animación decidida, refina la aceleración y la profundidad para que la temporización, la elevación y el movimiento se lean como parte de un mismo diseño meditado.