Generador de animación CSS
CSS Animation Generator es una herramienta gratuita en línea que te ayuda a crear animaciones CSS fluidas y llamativas sin escribir fotogramas clave manualmente. Elija entre efectos de animación prediseñados como desvanecimiento, deslizamiento, rebote, rotación, volteo, zoom y más. Personalice la duración, el retardo, la función de temporización, el recuento de iteraciones, la dirección y el modo de relleno mediante controles intuitivos. Obtenga una vista previa de su animación en tiempo real en un elemento en vivo, luego copie el código CSS generado, incluidos @ fotogramas clave y todos los prefijos de proveedor. Perfecto para desarrolladores y diseñadores que desean agregar movimiento a sus sitios web sin un profundo conocimiento de animación CSS.
Qué es
Las animaciones CSS le permiten crear transiciones suaves y efectos de movimiento complejos en elementos web únicamente a través de CSS, sin necesidad de JavaScript (para animaciones básicas). El sistema de animación CSS se basa en dos conceptos centrales: transiciones (cambios simples de estado a estado) y fotogramas clave(secuencias de animación de varios pasos). La abreviatura de la propiedad animación CSS incluye: - animation-name: El nombre de la regla @ keyframes - duración de la animación: Cuánto dura un ciclo (por ejemplo, 1 segundo, 500 ms) - animación-retraso: Tiempo de espera antes de que comience la animación - animación-función de sincronización: La curva de velocidad (facilidad, lineal, facilidad de entrada, facilidad de salida, facilidad de entrada, bezier cúbico) - animación-iteración-recuento: Cuántas veces repetir (número o infinito) - animación-dirección: normal, inversa, alternativa, alternativa-inversa -modo de relleno de animación: Qué estilos se aplican antes/después (ninguno, hacia adelante, hacia atrás, ambos) - animación-estado de reproducción: en ejecución o en pausa La regla @ keyframes define las etapas de animación: "'css @ fotogramas clave fadeIn { desde {opacidad : 0;} a {opacidad : 1;} } ``` Las categorías de animación preconstruidas incluyen: - Animaciones de fundido: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeOut - Animaciones de diapositivas: slideInUp, slideInDown, slideInLeft, slideInRight - Animaciones de rebote: bounceIn, bounceInUp, bounceInDown, bounceOut - Animaciones de rotación: rotateIn, rotateInUpLeft, rotateInUpRight, rotateOut - Animaciones de zoom: zoomIn, zoomInUp, zoomInDown, ZoomOut - Animaciones especiales: bisagra, rollIn, rollOut, flash, pulse, shake, swing, tada Explicación de las funciones de temporización: - facilidad: Inicio lento, medio rápido, final lento (predeterminado) - lineal: Velocidad constante en todo - facilidad de entrada: Arranque lento, aceleración - ease-out: Arranque rápido, desaceleración - facilidad de entrada y salida: inicio y finalización lentos, centro rápido - cúbico-bézier (x1, y1, x2, y2): Curva de sincronización personalizada El generador genera CSS limpio y entre navegadores con todos los prefijos de proveedor necesarios (- webkit -, - moz -, - o -) y una alternativa para navegadores más antiguos.
Cómo usar
- Seleccione un efecto de animación de la galería. Explore categorías como Desvanecimiento, Deslizamiento, Rebote, Rotación, Zoom y Efectos especiales. Haga clic en cualquier miniatura de animación para previsualizarla en el elemento de demostración.
- Ajuste la duración de la animación con el control deslizante o el campo de entrada. Los valores típicos oscilan entre 200 ms (retroalimentación rápida) y 2-3 segundos(efectos dramáticos). Las duraciones más cortas se sienten más ágiles para las interacciones de la interfaz de usuario.
- Establezca un retraso si desea que la animación comience después de una pausa. Útil para secuenciar múltiples animaciones (por ejemplo, desvanecer el encabezado después de 500 ms, luego deslizar el contenido después de 800 ms).
- Elija una función de temporización en el menú desplegable. Pruebe 'ease-out' para animaciones de entrada (llegada rápida, parada suave) y 'ease-in' para animaciones de salida. Use 'lineal'} para rotaciones continuas. Cree curvas cúbicas bézier personalizadas con el editor de curvas.
- Configure el recuento de iteraciones (cuántas veces se reproduce la animación) y la dirección (normal, inversa, alterna para efectos de ida y vuelta). Establezca 'infinito' para animaciones continuas como los giradores de carga.
- Obtenga una vista previa de la animación en tiempo real haciendo clic en el botón' Reproducir'. El elemento demo ejecuta la animación configurada. Haga clic en 'Pausa' para congelar en el estado actual o 'Reproducir' para reiniciar.
- Copie el código CSS generado desde el panel salida. El código incluye la definición @keyframes, la taquigrafía de la animación y las propiedades de escritura manual individuales. Pégalo en tu hoja de estilo o usa estilos integrados.
Ejemplos
Entrada: Type: Fade In, Duration: 1s, Easing: ease-in-out
Proceso: Keyframes 0%:opacity=0, 100%:opacity=1 → CSS output
Resultado: @keyframes fadeIn { 0%{opacity:0} 100%{opacity=1} }
Entrada: Type: Slide From Left, Duration: 500ms
Proceso: translateX(-100%) to translateX(0)
Resultado: @keyframes slideLeft { 0%{transform:translateX(-100%)} 100%{transform:translateX(0)} }
Búsquedas Relacionadas
La gente también busca: generador de animaciones css, fotogramas clave css, animación css, generador de animación.
generador de animaciones cssfotogramas clave cssanimación cssgenerador de animación
Preguntas Frecuentes
¿Cuál es la diferencia entre animaciones CSS y transiciones CSS?
Las transiciones CSS se animan entre dos estados (por ejemplo, cambio de estado de desplazamiento) y requieren un desencadenador como: desplazamiento o cambios de clase. Las animaciones CSS usan @ fotogramas clave para definir múltiples estados intermedios y pueden ejecutarse automáticamente al cargar la página, repetirse infinitamente o reproducirse al revés. Utilice transiciones para efectos simples de desplazamiento / clic y animaciones para movimientos complejos, de varios pasos o de reproducción automática. Ambos se pueden combinar: use transiciones para estados flotantes y animaciones para efectos de entrada.
¿Cómo activo una animación al cargar la página?
Simplemente agregue la propiedad animation al CSS del elemento. Se reproducirá automáticamente cuando se represente el elemento:. my-element { animation: fadeIn 1s ease-out;}. Si desea que la animación se pause inicialmente y se active más tarde a través de JavaScript, configure animation-play-state: paused de forma predeterminada y cambie a ejecución cuando sea necesario (por ejemplo, al desplazarse a la vista, al interactuar con el usuario o en un temporizador).
¿Puedo combinar varias animaciones en un elemento?
Sí. Aplique varias animaciones usando una lista separada por comas: animación: fadeIn 1s, slideInUp 1s; Cada animación puede tener su propia función de duración, retardo y temporización. Esto permite efectos combinados complejos como desvanecimiento mientras se desliza simultáneamente hacia arriba. Tenga en cuenta el rendimiento: demasiadas animaciones simultáneas pueden causar jank en dispositivos móviles.
¿Por qué mi animación no es fluida? Parece janky.
Para animaciones fluidas a 60 fps, solo anime las propiedades que puedan acelerarse mediante GPU: transformar (traducir, escalar, rotar, sesgar) y opacidad. Evite animar el ancho, alto, superior, izquierdo, margen o relleno; estos activan el recálculo del diseño (reflujo), que es costoso. Si ve jank, agregue will-change: transform; al elemento animado para indicar al navegador que lo optimice. También reduzca la cantidad de elementos animados en la pantalla simultáneamente.
¿Son accesibles las animaciones CSS?
Algunos usuarios son sensibles al movimiento y prefieren la animación reducida. Respete esto marcando la consulta de medios de prefers-reduced-motion: @media (prefers-reduced-motion: reduce) {*{¡animación: ninguna !importante;} }. Los usuarios con trastornos vestibulares pueden experimentar molestias por los efectos de paralaje, el zoom o las animaciones giratorias. Proporcione siempre una forma de deshabilitar o minimizar las animaciones y evite la reproducción automática de animaciones largas sin el control del usuario.