Softonic

Generador de Animaciones CSS

Paso 1 / 2
Preajuste
Siguiente

Escribir @keyframes desde cero es tedioso: eliges porcentajes, adivinas propiedades, recargas, observas, ajustas. Este generador te ofrece seis animaciones listas (fundido, deslizar hacia arriba, rebote, giro, pulso y sacudida) y te permite configurar el nombre, la duración, el easing, el número de iteraciones y la dirección. El resultado se reproduce en tiempo real y, cuando estés satisfecho, puedes copiar el bloque @keyframes generado y la propiedad abreviada animation.

Cómo crear una animación CSS

  1. 1

    Elige una plantilla

    Elige una de las seis animaciones integradas: fundido, deslizar hacia arriba, rebote, giro, pulso o sacudida.

  2. 2

    Nombra la animación

    Dale a los keyframes un identificador CSS válido, como `cardIn` o `fadeIn`. El mismo nombre se usa en la abreviatura `animation`.

  3. 3

    Configura el tiempo y la repetición

    Duración en segundos, easing (ease, ease-in, ease-out, ease-in-out, linear o spring), número de iteraciones (1, 2, 3 o infinitas) y dirección (normal, reverse, alternate o alternate-reverse).

  4. 4

    Copia el CSS

    La regla `@keyframes` generada y la abreviatura `animation:`, listas para pegar en tu hoja de estilos.

Anatomía de una animación

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Ocho propiedades en la abreviatura: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Opciones de easing

El generador ofrece seis funciones de easing:

Easing cubic-bezier() Sensación
linear n/a Velocidad constante
ease-in 0.42, 0, 1, 1 Inicio lento, final rápido
ease-out 0, 0, 0.58, 1 Inicio rápido, final lento
ease-in-out 0.42, 0, 0.58, 1 Lento-rápido-lento
ease (predet.) 0.25, 0.1, 0.25, 1 Suave por defecto
spring 0.68, -0.55, 0.27, 1.55 Sobrepasa y se asienta

Anima las propiedades correctas

El navegador puede animar cualquier propiedad, pero solo unas pocas se animan con fluidez en la GPU sin provocar layout o pintura:

Baratas (solo composición): transform, opacity, filter.

Caras (layout/pintura): width, height, top, left, margin, padding, background-color.

Las animaciones a sesenta fotogramas por segundo sobre width y top son posibles en elementos pequeños, pero fallan en el móvil si animas muchas a la vez. Para movimientos complejos, prefiere siempre transform: translate(...) sobre top / left y transform: scale(...) sobre el ancho/alto animado.

will-change: úsalo con moderación

Indicar al navegador que preasigne una capa de composición puede ayudar a la fluidez:

.card { will-change: transform; }

Pero consume memoria. Aplícalo justo antes de que se dispare la animación y elimínalo al terminar. Fijar will-change: transform de forma permanente en muchos elementos puede perjudicar más que ayudar.

Movimiento reducido

Algunos usuarios son sensibles al movimiento y configuran preferencias del sistema:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Respeta esta configuración. Ofrece un cambio de estado instantáneo o un fundido muy sutil como alternativa.

Preguntas frecuentes

CSS para movimiento simple, declarativo y único. Web Animations API (element.animate()) para temporización impulsada por JavaScript, keyframes dinámicos, pausa y control de reproducción. Ambos se ejecutan en el compositor; ninguno es inherentemente más rápido.

Casi siempre porque estás animando una propiedad que activa el layout (width, top, margin) en lugar de transform. Cambia a translate() y scale() y el tartamudeo generalmente desaparece.

Sí, animation: a 1s, b 1s 1s, c 1s 2s; ejecuta tres animaciones secuencialmente mediante retrasos escalonados. Este generador produce una sola animación, así que añade tú las entradas extra en la abreviatura. Para coreografías más complejas, usa la Web Animations API o una biblioteca como GSAP.

Hace que el elemento tome el estado from antes de que comience la animación (durante el retraso) y mantenga el estado to después de que termine. Sin both, el elemento vuelve a su estilo anterior a la animación cuando esta finaliza. El generador mantiene la abreviatura mínima; añade el fill mode tú mismo si lo necesitas.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.