Générateur d'animations CSS - Constructeur @keyframes gratuit en ligne

Créez des animations CSS @keyframes avec aperçu en direct. Définissez la durée, l'accélération, l'itération, la direction et les valeurs personnalisées des propriétés CSS from/to

Outils 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;
}

Comment utiliser

1Choisissez la propriété CSS à animer (par ex. transform, opacity, background-color)
2Définissez les valeurs « from » et « to » pour cette propriété
3Ajustez la durée, la fonction de temporisation, le nombre d'itérations et la direction
4Observez l'aperçu en direct s'animer avec vos paramètres
5Copiez le CSS complet @keyframes + animation et collez-le dans votre feuille de styles

Questions fréquentes

La plupart des propriétés CSS ayant des valeurs numériques ou de couleur peuvent être animées, notamment transform, opacity, background-color, width, height et font-size. Les propriétés non animables (comme display) ne s'interpoleront pas de manière fluide.

iteration-count contrôle le nombre de fois que l'animation est jouée. Le régler sur « infinite » boucle l'animation indéfiniment ; le régler sur un nombre la joue ce nombre de fois.

alternate fait jouer l'animation en avant lors des itérations impaires et en arrière lors des itérations paires. Cela crée un effet de va-et-vient fluide sans sauts brusques.

Copiez le bloc @keyframes et la propriété raccourcie animation. Ajoutez les @keyframes à votre fichier CSS et définissez la propriété animation sur l'élément que vous souhaitez animer.

Comment utiliser

1Choisissez la propriété CSS à animer (par ex. transform, opacity, background-color)

2Définissez les valeurs « from » et « to » pour cette propriété

3Ajustez la durée, la fonction de temporisation, le nombre d'itérations et la direction

4Observez l'aperçu en direct s'animer avec vos paramètres

5Copiez le CSS complet @keyframes + animation et collez-le dans votre feuille de styles

Questions fréquentes

iteration-count contrôle le nombre de fois que l'animation est jouée. Le régler sur « infinite » boucle l'animation indéfiniment ; le régler sur un nombre la joue ce nombre de fois.

alternate fait jouer l'animation en avant lors des itérations impaires et en arrière lors des itérations paires. Cela crée un effet de va-et-vient fluide sans sauts brusques.

Copiez le bloc @keyframes et la propriété raccourcie animation. Ajoutez les @keyframes à votre fichier CSS et définissez la propriété animation sur l'élément que vous souhaitez animer.