CSS3 La propriété animation

...

Les propriétés CSS

Exemple Liaison d'une animation à un élément <div>, à l'aide de la propriété raccourcie annimation:

  <!doctype html>
  <html lang="fr">
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  div {
  width:210px;
  background:#fc0;
  position:relative;
  animation:monAnimation 10s infinite alternate;
  -webkit-animation:monAnimation 10s infinite alternate; /*Safari
  et Chrome*/
  }
  @keyframes monAnimation
  {
  from {left:0px; opacity: 0; }
  to {left:200px;opacity: 1;}
  }
  @-webkit-keyframes monAnimation /*Safari et Chrome*/
  {
  from {left:0px; opacity: 0; }
  to {left:200px;opacity: 1;}
  </style>
  </head>
  <body>
  <div><p><strong>Note:</strong> La propriété animation n'est pas supportée dans Internet Explorer 9 et versions antérieures.</p></div>
  </body>
  </html>

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La propriété animation est prise en charge dans Internet Explorer 10, Firefox et Opera.

Safari et Chrome prennent en charge une solution de rechange, la propriété -webkit-animation.

Remarque : La propriété animation n'est pas prise en charge dans Internet Explorer 9 et versions antérieures.

Définition et utilisation

La propriété animation est une propriété raccourcie pour les six propriétés de l'animation suivantes:

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction..

Remarque : Spécifiez toujours la propriété de la durée de l'animation, sinon la durée est 0 et ne sera donc jamais jouée.

Syntaxe JavaScript : objet. style.animation="monAnimation 5 s infinie"

Syntaxe

animation: nom duré timing-function délai iteration-count direction;

Propriété	Description	Valeur par defaut
animation-name	La propriété animation-name spécifie un nom pour l'animation de @keyframes.	aucun
animation-duration	définit combien de secondes ou millisecondes nécessaire pour effectuer un cycle de l’animation.	0
animation-delay	La propriété delay-animation définit quand l'animation va commencer. La valeur de l'animation-delay est définie en secondes (s) ou en millisecondes (ms).	0
animation-iteration-count	définit combien de fois une animation devrait être jouée.	1

CSS3 La propriété animation-timing-function

Exemple Jouer une animation à la même vitesse de bout en bout :

Sélectionner le code

  animation-timing-function:linear;
  -webkit-animation-timing-function:linear; /* Safari et Chrome */

Définition et utilisation

animation-timing-function spécifie la courbe de vitesse de l'animation.

La courbe de vitesse définit le temps d'une animation utilisé pour passer d'un jeu de styles CSS à un autre.

La courbe de vitesse est utilisée pour faire les changements en douceur.

Valeur par défaut :	ease
Héritée :	non
Version:	CSS3
Syntaxe JavaScript :	objet. style.animationTimingFunction="linear"

Syntaxe

animation-timing-function: value;

Lanimation-timing-function utilise une fonction mathématique, appelée la courbe cubique Bezier, pour faire la courbe de vitesse. Vous pouvez utiliser vos propres valeurs dans cette fonction, ou utilisez l'une des valeurs prédéfinies :

Valeur	Description
linear	L'animation a la même vitesse du début à la fin
ease	Par défaut. L'animation a un démarrage lent, puis milieu rapide, et une fin lente
ease-in	L'animation a un démarrage lent
ease-out	L'animation a une fin lente
ease-in-out	L'animation a la fois un début et une fin lente
Cubic-bezier(n,n,n,n)	Définir vos propres valeurs dans la fonction cubique-Bezier Les valeurs possibles sont des valeurs numériques de 0 à 1

Astuce : Essayez que les différentes valeurs dans l'essayer vous-même section ci-dessous.

Exemple Pour mieux comprendre la fonction et ses valeurs :
Voici cinq éléments < div > différents avec cinq valeurs différentes :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
  <meta charset="UTF-8">
  <title>mieux comprendre les valeurs de la fonction</title>
  <style>
  div
  {
  width:100px;
  height:50px;
  background:#00f;
  color:#fff;
  font-weight:bold;
  position:relative;
  animation:monAnimation 5s infinite;
  -webkit-animation:monAnimation 5s infinite; /* Safari et Chrome
  */
  }
  #div1 {animation-timing-function:linear;}
  #div2 {animation-timing-function:ease;}
  #div3 {animation-timing-function:ease-in;}
  #div4 {animation-timing-function:ease-out;}
  #div5 {animation-timing-function:ease-in-out;}
  /* Safari et Chrome: */
  #div1 {-webkit-animation-timing-function:linear;}
  #div2 {-webkit-animation-timing-function:ease;}
  #div3 {-webkit-animation-timing-function:ease-in;}
  #div4 {-webkit-animation-timing-function:ease-out;}
  #div5 {-webkit-animation-timing-function:ease-in-out;}
  @keyframes monAnimation
  {
  from {left:0px;}
  to {left:300px;}
  }
  @-webkit-keyframes monAnimation /* Safari et Chrome */
  {
  from {left:0px;}
  to {left:300px;}
  }
  </style>
  </head>
  <body>
  <div id="div1">linear</div>
  <div id="div2">ease</div>
  <div id="div3">ease-in</div>
  <div id="div4">ease-out</div>
  <div id="div5">ease-in-out</div>
  </body>
  </html>

Exemple les courbes de vitesse sont définies avec la fonction cubique-Bézier :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
  <meta charset="UTF-8">
  <title>mieux comprendre les valeurs de la fonction</title>
  <style>
  div
  {
  width:100px;
  height:50px;
  background:#90f;
  color:#fff;
  font-weight:bold;
  padding:10px;
  position:relative;
  animation:monAnimation 5s infinite;
  -webkit-animation:monAnimation 5s infinite; /* Safari et Chrome
  */
  }
  #div1 {animation-timing-function:cubic-bezier(0,0,0.20,1);}
  #div2 {animation-timing-function:cubic-bezier(0.20,0.1,0.20,1);}
  #div3 {animation-timing-function:cubic-bezier(0.32,0,1,1);}
  #div4 {animation-timing-function:cubic-bezier(0,0,0.48,1);}
  #div5 {animation-timing-function:cubic-bezier(0.32,0,0.48,1);}
  /* Safari and Chrome: */
  #div1
  {-webkit-animation-timing-function:cubic-bezier(0,0,0.20,1);}
  #div2
  {-webkit-animation-timing-function:cubic-bezier(0.20,0.1,0.20,1);}
  #div3
  {-webkit-animation-timing-function:cubic-bezier(0.32,0,1,1);}
  #div4
  {-webkit-animation-timing-function:cubic-bezier(0,0,0.48,1);}
  #div5
  {-webkit-animation-timing-function:cubic-bezier(0.32,0,0.48,1);}
  @keyframes monAnimation
  {
  from {left:0px;}
  to {left:300px;}
  }
  @-webkit-keyframes monAnimation /* Safari et Chrome */
  {
  from {left:0px;}
  to {left:300px;}
  }
  </style>
  </head>
  <body>
  <div id="div1"> linear</div>
  <div id="div2"> ease</div>
  <div id="div3"> ease-in</div>
  <div id="div4"> ease-out</div>
  <div id="div5"> ease-in-out</div>
  </body>
  </html>

CSS3 La propriété animation-direction

Définition et utilisation

La propriété animation-direction définit si oui ou non l'animation devrait être jouée à l'envers sur des cycles de rechange.

Remarque : Si l'animation est jouée une seule fois, cette propriété n'a aucun effet.

Syntaxe

animation-direction: valeur;

Valeur	Description
normal	Valeur par défaut. L'animation doit être jouée normalement
reverse	L'animation devrait jouer en sens inverse
alternate	L'animation sera joué comme d'habitude chaque fois impaires (1,3,5, etc..) et en sens inverse les fois paire (2,4,6, etc....)
alternate-reverse	L'animation sera jouée en sens inverse chaque fois impaires (1,3,5, etc..) et dans une direction normale les fois paire (2,4,6, etc....)

Pages connexes

Tutorial CSS3 : Animations CSS3

Sommaire

Par carabde 10 mars 2014

CSS3 Comment créer des animation à l'aide de la propriété animation sans javascript

Les propriétés CSS par ordre alphabétique

...

Exemple Liaison d'une animation à un élément <div>, à l'aide de la propriété raccourcie annimation:

CSS3 La propriété animation-timing-function

Exemple Jouer une animation à la même vitesse de bout en bout :

Exemple les courbes de vitesse sont définies avec la fonction cubique-Bézier :

CSS3 La propriété animation-direction

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