logo oujood
🔍

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

.......................

OUJOOD.COM

...


Les propriétés CSS

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

Exemple    📋 Copier le code 

  <!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 :

Exemple    📋 Copier 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 :

Exemple    📋 Copier 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 :

Exemple    📋 Copier 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