Constructor de Animaciones CSS

Crea animaciones de keyframes con editor de línea de tiempo

Configuración

Nombre de Animación

Duración

Retardo

Número de Iteraciones

Dirección

Función de Tiempo

Modo de Relleno

Línea de Tiempo

0%25%50%75%100%

Keyframe en 0%

Keyframe en 100%

Presets

Vista Previa

Vista previa con configuración actual

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg) translateX(0px) translateY(0px);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite both;
}