oujood.com

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.

chercher |

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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -webkit-
1016
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-delaySpécifie un délai avant le démarrage de l'animation
animation-directionIndique si l'animation doit être jouée en sens inverse sur des cycles alternés.
animation-durationIndique le nombre de secondes ou de millisecondes nécessaires à la réalisation d'une animation.
animation-fill-modeSpécifie quelles valeurs sont appliquées par l'animation en dehors de son temps d'exécution
animation-iteration-countSpécifie le nombre de fois qu'une animation doit être jouée.
animation-nameSpécifie le nom de l'image clé que vous souhaitez lier au sélecteur.
animation-play-stateIndique si l'animation est en cours d'exécution ou en pause.
animation-timing-functionSpécifie la courbe de vitesse de l'animation
initialDéfinit cette propriété à sa valeur par défaut.
inheritHérite de cette propriété de son élément parent.

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web