Generador de animaciones CSS - Constructor de @keyframes gratis en línea

Cree animaciones CSS @keyframes con vista previa en vivo. Configure duración, aceleración, iteración, dirección y valores personalizados de propiedades CSS from/to

Herramientas CSS

Tool

CSS Property to Animate

FromTo

Duration (1s)

TimingIterationsDirection

CSS

@keyframes anim_R_hbqav5ubqiudb_ {
  from { transform: translateX(0px); }
  to { transform: translateX(100px); }
}

.element {
  animation: anim_R_hbqav5ubqiudb_ 1s ease infinite alternate;
}

Cómo usar

1Elija la propiedad CSS a animar (por ejemplo, transform, opacity, background-color)
2Establezca los valores "from" y "to" para esa propiedad
3Ajuste la duración, la función de temporización, el número de iteraciones y la dirección
4Observe la vista previa en vivo animarse con su configuración
5Copie el CSS completo de @keyframes + animación y péguelo en su hoja de estilos

Preguntas frecuentes

La mayoría de las propiedades CSS con valores numéricos o de color pueden animarse, incluyendo transform, opacity, background-color, width, height y font-size. Las propiedades no animables (como display) no se interpolarán suavemente.

iteration-count controla cuántas veces se reproduce la animación. Establecerlo en "infinite" repite la animación indefinidamente; establecerlo en un número la reproduce esa cantidad de veces.

alternate hace que la animación se reproduzca hacia adelante en las iteraciones impares y hacia atrás en las pares. Esto crea un efecto suave de ida y vuelta sin saltos abruptos.

Copie el bloque @keyframes y la propiedad abreviada de animación. Agregue los @keyframes a su archivo CSS y establezca la propiedad animation en el elemento que desea animar.

Cómo usar

1Elija la propiedad CSS a animar (por ejemplo, transform, opacity, background-color)

2Establezca los valores "from" y "to" para esa propiedad

3Ajuste la duración, la función de temporización, el número de iteraciones y la dirección

4Observe la vista previa en vivo animarse con su configuración

5Copie el CSS completo de @keyframes + animación y péguelo en su hoja de estilos

Preguntas frecuentes

iteration-count controla cuántas veces se reproduce la animación. Establecerlo en "infinite" repite la animación indefinidamente; establecerlo en un número la reproduce esa cantidad de veces.

alternate hace que la animación se reproduzca hacia adelante en las iteraciones impares y hacia atrás en las pares. Esto crea un efecto suave de ida y vuelta sin saltos abruptos.

Copie el bloque @keyframes y la propiedad abreviada de animación. Agregue los @keyframes a su archivo CSS y establezca la propiedad animation en el elemento que desea animar.