propriété css animation

Animer un élément HTML sans javascript: la propriété css animation

CSS permet d'animer des éléments HTML sans utiliser JavaScript. Une animation permet à un élément de passer systématiquement et au bon moment d'un style à un autre.
Vous pouvez modifier toutes les propriétés CSS que vous voulez, le nombre de fois que vous le souhaitez. Pour utiliser une animation CSS, vous devez d'abord spécifier des @keyframes pour l'animation. Les @keyframes décriront les styles que cet élément aura à des moments spécifiques.

Définition et utilisation de la propriété css animation

La propriété animation est un raccourci des propriétés :

Voir aussi notre tutoriel Animations CSS3

La Syntaxe CSS

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Note : Toujours spécifier la propriété animation-duration, sinon la durée est de 0, et ne sera jamais jouée.

Valeurs par défaut	Stretch
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.animation="monMove 5s infinite"

Prise en charge de la propriété css animation dans navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- , -moz ou -o- indiquent la première version qui fonctionne avec un préfixe.

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

Exemple : Création d'une animation pour un élément div, en utilisant la propriété raccourcie animation

Déplacez un élément de 0px à 300px à gauche. L'animation dure 5 secondes. Elle recommence ensuite, et se poursuit indéfiniment (infini).

: Copier le code

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: monAnimation 5s infinite;
}

@keyframes monAnimation {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>La propriété css animation </h1>
<div></div>
</body>
</html>

changer l'animation avec JavaScript

Exemple Copier le code

<!DOCTYPE html>
<html>
<head>
<style> 
#monDiv {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  animation: mymove 1s infinite;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

@keyframes monAnimation {
  from {top: 0px;}
  to {top: 200px;}
}
#b1{display:inline;}
#b2{display:none;}
</style>
</head>
<body>

<h1>Modification de l'animation avec JavaScript</h1>
<p>
Cliquez sur le bouton "Essayer" ci dessous pour modifier la valeur de la propriété "animation".</p>

<button id="b1" onclick="maFonction()">Essayer</button><button id="b2" onclick="maFonction2()">Retour</button>

<script>
function maFonction() {
  document.getElementById("monDiv").style.animation = "monAnimation 4s 2";
  document.getElementsByTagName("p")[0].innerHTML = "<b>Cliquez sur le bouton 'Retour'  pour revenir à l'animation  initiale'</b>";
   document.getElementById("b1").style.display = "none";
  document.getElementById("b2").style.display = "inline";
  
}
function maFonction2() {
 location.href="teste.html" ;
  
}
</script>

<div id="monDiv"></div>
</body>
</html>

Valeurs de la propriété animation

Valeur	Description
animation-delay	Spécifie un délai avant le démarrage de l'animation
animation-direction	Indique si l'animation doit être jouée en sens inverse sur des cycles alternés.
animation-duration	Indique le nombre de secondes ou de millisecondes nécessaires à la réalisation d'une animation.
animation-fill-mode	Spécifie quelles valeurs sont appliquées par l'animation en dehors de son temps d'exécution
animation-iteration-count	Spécifie le nombre de fois qu'une animation doit être jouée.
animation-name	Spécifie le nom de l'image clé que vous souhaitez lier au sélecteur.
animation-play-state	Indique si l'animation est en cours d'exécution ou en pause.
animation-timing-function	Spécifie la courbe de vitesse de l'animation
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite de cette propriété de son élément parent.

Liste des propriétés css