La propriété @keyframes : la clé pour créer des animations en CSS

Découvrez les fonctionnalités de la propriété CSS @keyframes

La propriété CSS @keyframes est utilisée pour créer des animations en CSS. Elle permet de définir les différentes étapes d'une animation et de les appliquer à des éléments HTML.

Définition

La propriété @keyframes est utilisée pour définir les différentes étapes d'une animation. Elle est utilisée en conjonction avec la propriété CSS animation pour appliquer l'animation à un élément HTML.

Syntaxe générale

La syntaxe générale de la propriété @keyframes est la suivante :

@keyframes nom_de_l'animation {
  pourcentage {
    propriété: valeur;
  }
  pourcentage {
    propriété: valeur;
  }
  ...
}

• nom_de_l'animation est le nom de l'animation (il doit être unique)
• pourcentage est le pourcentage de l'animation où la propriété doit être appliquée (de 0% à 100%)
• propriété est la propriété CSS à animer
• valeur est la valeur de la propriété lors de l'animation

La propriété CSS @keyframes permet de créer des animations en spécifiant les différentes étapes de l'animation en pourcentage ou en utilisant les mots-clés "from" (équivalent à 0%) et "to" (équivalent à 100%). Ces animations peuvent ensuite être appliquées à des éléments en utilisant la propriété animation.

Exemples

Exemple 1 : animation de la couleur de fond

     Copier le code

@keyframes changementCouleurFond {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

Dans cet exemple, nous avons créé une animation appelée "changementCouleurFond" qui change la couleur de fond de bleu à jaune.

Exemple 2 : animation de la taille

     Copier le code

@keyframes agrandissement {
  0% {
    width: 50px;
    height: 50px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}

Dans cet exemple, nous avons créé une animation appelée "agrandissement" qui agrandit un élément de 50px x 50px à 100px x 100px.

Exemple 3 : animation complexe

     Copier le code

@keyframes animationComplexe {
		0% {
		transform: rotate(0deg);
		}
		25% {
		transform: rotate(90deg);
		}
		50% {
		transform: rotate(180deg);
		}
		75% {
		transform: rotate(270deg);
		}
		100% {
		transform: rotate(360deg);
		}
	}

Dans cet exemple, nous avons créé une animation appelée "animationComplexe" qui fait tourner un élément de 0 degrés à 360 degrés.

La propriété @keyframes est un outil puissant pour créer des animations en CSS. Elle permet de définir les différentes étapes d'une animation et de les appliquer à des éléments HTML. Il est important de noter que pour utiliser cette propriété, le navigateur doit être compatible avec les animations CSS.

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	43 4 -webkit-	10	16 5 -moz-	9 4 -webkit-	30 15 -webkit- ou 12 -o-

Comment appliquer l'animation sur un élément HTML

Une fois que vous avez créé une animation en utilisant la propriété @keyframes, vous pouvez l'appliquer à un élément HTML en utilisant la propriété CSS animation.

La syntaxe générale de la propriété animation est la suivante :

selecteur {
  animation-name: nom_de_l'animation;
  animation-duration: temps;
  animation-timing-function: fonction;
  animation-iteration-count: nombre;
}

Où :

• selecteur est le sélecteur CSS de l'élément sur lequel l'animation doit être appliquée
• nom_de_l'animation est le nom de l'animation créée avec @keyframes
• temps est la durée de l'animation en secondes (ex: 2s)
• fonction est la fonction de timing de l'animation (ex: ease, linear, ease-in, etc.)
• nombre est le nombre de fois que l'animation doit être répétée (infini pour une répétition continue)

Voici un exemple d'application de l'animation "changementCouleurFond" à un élément HTML :

     Copier le code

#maDiv {
  animation-name: changementCouleurFond;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Dans cet exemple, nous avons sélectionné l'élément HTML avec l'ID "maDiv" et appliqué l'animation "changementCouleurFond" à celui-ci. Nous avons également défini la durée de l'animation à 2 secondes, la fonction de timing à linear et le nombre de répétitions à infini, ce qui signifie que l'animation continuera à être répétée en boucle.

Il est important de noter que pour que l'animation fonctionne, il est nécessaire d'appliquer la propriété animation sur un élément HTML et de s'assurer que le navigateur utilisé est compatible avec les animations CSS.

Vous pouvez également combiner différentes propriétés d'animation pour créer des animations plus complexes et plus créatives. Il existe également des outils en ligne tels que Animate.css qui vous permettent de créer des animations prédéfinies pour une utilisation facile dans vos projets.

En résumé, la propriété CSS @keyframes est un outil essentiel pour créer des animations en CSS. Elle permet de définir les différentes étapes d'une animation et de les appliquer à des éléments HTML. En utilisant la propriété animation, vous pouvez facilement appliquer ces animations à des éléments spécifiques de votre page web. Avec un peu de créativité et de pratique, vous pourrez créer des animations époustouflantes pour vos projets web.

Exemple complet : Une animation qui fait tourner un élément

     Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété @keyframes </title>
<style>
h1{color:#003668;}
      
  /* Exemple d'utilisation */
  /* On crée une animation qui fait tourner un élément */
  @keyframes tourner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* On applique l'animation à un élément en utilisant la propriété animation */
  /* On peut définir la durée de l'animation, le nombre de répétitions, etc. */
  .monElement {
  position: relative;
  top:100px;
  left:100px;
	width:200px;
	border:solid 1px black;
    animation: tourner 5s linear infinite;
  }
</style>
  </head>
  <body>
	<h1>Appliquer l'animation à un élément en utilisant la propriété animation</h1><br>
    <div class="monElement">Mon élément qui tourne</div>
  </body>
</html>

Pour en savoir plus sur les animation css voir notre tuotriel sur les animations ici