Herramienta gratuita

Constructor de Animaciones CSS

Construye animaciones CSS con fotogramas clave de forma visual. Previsualiza en tiempo real y copia el código CSS generado al instante.

Vista previa

Duración2s

Iteraciones

Función de tiempo

Dirección

Keyframes

translateX (px)

translateY (px)

rotar (deg)

escala

opacidad

Color

translateX (px)

translateY (px)

rotar (deg)

escala

opacidad

Color

translateX (px)

translateY (px)

rotar (deg)

escala

opacidad

Color

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

Preguntas frecuentes

¿Puedo personalizar la salida generada?

Sí. La herramienta proporciona varias opciones de personalización para adaptar el resultado a sus necesidades específicas. Ajuste la configuración antes de generar o regenerar con diferentes opciones.

¿El contenido generado es de uso gratuito?

Sí. Todo lo que genere con esta herramienta es suyo para utilizarlo con fines personales, educativos o comerciales sin restricciones ni requisitos de atribución.

¿Esto requiere una cuenta?

No. La herramienta está lista para usarse inmediatamente sin necesidad de registrarse, enviar correo electrónico ni registrarse. Simplemente abre la página y comienza a generar.

¿Mis datos de entrada se mantienen privados?

Sí. Todo el procesamiento ocurre en su navegador. Sus datos de entrada y salida generada nunca se envían a ningún servidor externo.

Constructor de Animaciones CSS

Vista previa

Keyframes

Generated CSS

Acerca de esta herramienta

Cómo usarla

Preguntas frecuentes

Constructor de Animaciones CSS

Vista previa

Keyframes

Generated CSS

Herramientas Relacionadas

CSS Minificador

CSS Flexbox Generador de Diseño

CSS Grid Generador de Diseños

Generador de Gradientes CSS

Acerca de esta herramienta

Cómo usarla

Preguntas frecuentes

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk