🔧

Generador de Animación CSS

Generadores y Diseño · Herramienta online gratuita

Editar visualmente keyframes y generar @keyframes.

Equipo CoderNewbieÚltima actualización: 2026-09-20

Características

Nombre de animación

Duración2s

Retraso0s

Función de tiempo

Iteraciones

Dirección

Fotogramas clave

Desde

Scale 1Opacity 100%

Hasta

Scale 1.15Opacity 60%

Vista previa

Código CSS

@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.15);
    opacity: 0.6;
  }
}

.animated {
  animation: pulse 2s ease-in-out 0s infinite alternate;
}

Editor de keyframes

Ajusta los valores from/to de scale y opacity con sliders.

Todas las propiedades

Duración, retardo, timing, iteraciones y dirección cubiertos.

Vista previa en tiempo real

Ve la animación reproducirse inmediatamente mientras la ajustas.

Cómo usar Generador de Animación CSS

1Configure the generator settings (colors, size, format, etc.).
2Enter any required input text or data.
3Click generate to create the output.
4Download or copy the generated result.

Características

✓100% gratis — sin registro, sin suscripción, sin anuncios
✓Funciona íntegramente en tu navegador — los datos nunca salen de tu dispositivo
✓Rápida y ligera — resultados instantáneos
✓Multiplataforma — funciona en escritorio, tableta y móvil