Exporter (0) Imprimer
Développer tout

Animations

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les animations CSS. Les animations CSS vous permettent de créer des applications visuelles riches avec des expériences fluides et animées.

Les animations CSS sont définies par World Wide Web Consortium (W3C) dans la spécification CSS Animations.

Les animations sont similaires aux transitions, du fait qu’elles animent les éléments à mesure qu’ils changent de position, de taille, de couleur et d’opacité ; et à mesure qu’ils pivotent, sont mis à l’échelle, sont déplacés, etc. Tout comme vous le feriez avec des transitions, vous pouvez spécifier des fonctions de chronométrage pour contrôler le taux de progression d’une animation.

Cependant, avec les animations CSS3, niveau 3, vous pouvez également utiliser des images clés, qui indiquent les valeurs des propriétés animées à différents moments de l’animation. Ainsi, vous pouvez non seulement définir le comportement d’une animation au début et à la fin de l’animation, mais également entre ces deux stades. Les animations peuvent aussi contenir des itérations et une fonctionnalité d’inversion de la direction, et proposer des arrêts et reprises possibles.

Comme vous pouvez vous y attendre, les animations CSS3 fournissent un nombre infini de possibilités de création d’expériences riches et probantes. Cette rubrique fournit une vue d’ensemble de la création d’une animation CSS dans Internet Explorer 10 et dans les applications du Windows Store à l’aide de JavaScript et donne un exemple d’utilisation des animations CSS3.

Pour fonctionner avec Internet Explorer 10 et les applications du Windows Store en JavaScript, les propriétés, les règles @ (at-rules) et les événements décrits dans cette rubrique nécessitaient auparavant le préfixe Microsoft "-ms-". Ce préfixe n’est plus nécessaire, mais il est tout de même reconnu. Afin de garantir la compatibilité à l’avenir, les applications qui utilisent le préfixe Microsoft avec les propriétés de transformation doivent être mises à jour en conséquence.

Pour obtenir une liste des propriétés CSS que vous pouvez animer, voir Propriétés d’animation et de transition.

Création d’une animation

La création d’animation s’effectue en trois étapes :

1. Spécifier les propriétés de l’animation.
2. Créer des trames clés.
3. Appliquer l’animation à un ou plusieurs éléments.

Spécifier les propriétés de l’animation

Spécifiez d’abord les propriétés de l’animation dans un sélecteur qui s’applique à l’élément que vous souhaitez animer. Les propriétés de l’animation sont décrites dans cette section.

Propriété animation-name

La propriété animation-name spécifie des identificateurs d’animations (en fait, le « nom » que vous avez donné à l’animation spécifique). Un identificateur d’animation sélectionne une règle @ CSS @keyframes. Sa syntaxe est indiquée ici :

PropriétéDescription

animation-name

Spécifie un ou plusieurs identificateurs d’animation. Vous identifiez les animations à l’aide de la règle @ CSS @keyframes.

 

Propriété animation-duration

La propriété animation-duration indique la durée nécessaire à la réalisation d’un cycle de l’animation. Sa syntaxe est indiquée ici :

PropriétéDescription

animation-duration

Indique une ou plusieurs valeurs de temps séparées par une virgule, chacune indiquant la durée de la réalisation d’un cycle complet d’animation. Chaque valeur est exprimée sous la forme d’un nombre à virgule flottante suivi d’un indicateur d’unité de temps (ms ou s). Cette propriété accepte les valeurs négatives.

 

Propriété animation-timing-function

La propriété animation-timing-function permet de modifier la vitesse d’une animation au cours de sa durée en décrivant le mode de calcul des valeurs de propriété intermédiaires utilisées durant un cycle de l’animation. Pour cela, spécifiez une fonction de chronométrage d’animation basée sur une courbe de Bézier cubique, qui nécessite quatre paramètres. Vous pouvez spécifier une fonction de chronométrage pour l’animation entière ou pour des trames clés individuelles.

Vous pouvez spécifier la courbe explicitement à l’aide de la fonction cubic-bezier et entrer les quatre valeurs manuellement ou vous pouvez choisir des mots clés de fonction parmi ceux disponibles, chacun correspondant à une fonction de chronométrage couramment utilisée. La syntaxe de la propriété est indiquée ici :

PropriétéDescription

animation-timing-function

Spécifie une ou plusieurs fonctions de chronométrage séparées par une virgule qui définissent les valeurs de propriété intermédiaires utilisées au cours d’un cycle de l’animation. L’animation est calculée à partir d’un ensemble de propriétés d’objet correspondante identifié dans la règle @ CSS @keyframes spécifiée par la propriété animation-name. Les valeurs possibles sont les suivantes. Pour obtenir la description de chaque fonction, voir la page de référence sur animation-timing-function.

cubic-bezier(x1,y1,x2,y2)

Les quatre paramètres de cette fonction doivent être des valeurs à virgule flottante comprises entre 0 et 1. Les valeurs correspondent aux coordonnées x et y des points P1 et P2 de la courbe de Bézier cubique. Pour les propriétés autres que opacity et color, la fonction de courbe cubic-bezier accepte les coordonnées y en dehors de la plage standard de 0 à 1. Cela vous permet de créer des effets « élastiques » ou « de rebond ».

ease

Il s’agit de la valeur initiale. La fonction de chronométrage accélère graduellement au début, exécute l’animation à la vitesse optimale, puis ralentit graduellement à la fin.

linear

La fonction de chronométrage a une vitesse constante du début à la fin.

ease-in

Cette fonction de chronométrage accélère graduellement au début.

ease-out

Cette fonction de chronométrage ralentit graduellement à la fin.

ease-in-out

Cette fonction de chronométrage accélère graduellement au début, puis ralentit graduellement à la fin.

steps

Cette fonction de chronométrage définit une fonction de chronométrage progressive et nécessite deux paramètres. Le premier paramètre spécifie le nombre d’intervalles, le second paramètre facultatif spécifie le point dans l’intervalle à partir duquel la valeur de la propriété change. Le second paramètre est limité par défaut aux valeurs start ou end.

 

Propriété animation-iteration-count

La propriété animation-iteration-count définit le nombre de fois où un cycle d’animation est exécuté. La syntaxe de la propriété est indiquée ici :

PropriétéDescription

animation-iteration-count

Spécifie le nombre de fois qu’un cycle d’une animation est exécuté. Les valeurs sont séparées par une virgule.

<number>

Le nombre de fois que le cycle d’une animation est exécuté. Vous pouvez spécifier un nombre non entier et l’animation s’arrêtera à un certain point au cours d’un cycle. La valeur initiale est "1".

infinite

L’animation se répète sans cesse.

Si une valeur négative ou la valeur "0" est spécifiée, aucune animation n’est appliquée.

Vous pouvez utiliser la propriété animation-iteration-count en attribuant à la propriété animation-direction la valeur alternate, ce qui entraîne l’exécution en arrière de l’animation sur des cycles alternés.

 

Propriété animation-direction

La propriété animation-direction indique le sens d’exécution d’un cycle d’animation. La syntaxe de la propriété est indiquée ici :

PropriétéDescription

animation-direction

Indique si l’animation doit s’exécuter en arrière sur des cycles alternés. Cette propriété peut être définie avec une ou plusieurs valeurs séparées par une virgule :

normal

Il s’agit de la valeur initiale. Indique que l’animation ne s’exécutera pas en arrière sur des cycles alternés.

reverse

Cette valeur indique que les cycles de l’animation sont exécutés dans l’ordre inverse de celui spécifié.

alternate

Cette valeur indique que les cycles de l’animation alternent entre une exécution en avant (itérations impaires) et une exécution en arrière (itérations paires).

alternate-reverse

Cette valeur indique que les cycles de l’animation alternent entre une exécution en arrière (itérations impaires) et une exécution en avant (itérations paires).

 

Propriété animation-play-state

La propriété animation-play-state indique si une animation est en cours d’exécution ou suspendue. Cette propriété peut s’avérer utile lors de la création d’un mécanisme permettant à l’utilisateur de suspendre une animation. La syntaxe de la propriété est indiquée ici :

PropriétéDescription

animation-play-state

Indique si l’animation est en cours d’exécution ou suspendue. Cette propriété peut être définie avec une ou plusieurs valeurs séparées par une virgule :

paused

Suspend une animation en cours d’exécution. L’animation continuera à afficher sa valeur actuelle dans un état statique, comme si son exécution était figée.

running

Poursuit l’exécution d’une animation suspendue. L’animation redémarre à partir de la valeur actuelle.

 

Propriété animation-delay

La propriété animation-delay définit à quel moment l’animation démarrera en permettant à celle-ci de démarrer avec un décalage par rapport à l’exécution de la propriété. Sa syntaxe est indiquée ici :

PropriétéDescription

animation-delay

Spécifie une ou plusieurs valeurs de décalage séparées par une virgule dans une animation (la durée écoulée depuis le démarrage d’une animation) avant que celle-ci ne s’affiche pour un ensemble de propriétés d’objet correspondantes. Chaque valeur est exprimée sous la forme d’un nombre à virgule flottante suivi d’un indicateur d’unité de temps (ms ou s).

  • La valeur "0" est la valeur initiale et indique que l’animation s’exécutera dès son application.
  • Une valeur négative indique que l’animation s’exécutera dès son application, mais elle apparaîtra comme ayant commencé à s’exécuter au décalage spécifié ou pendant son cycle d’exécution.

 

Propriété animation-fill-mode

La propriété animation-fill-mode définit si les effets d’une animation sont visibles avant ou après son exécution. Par défaut, une animation n’affecte pas les valeurs de propriété entre le moment de son application et celui de son exécution (durant les délais définis par la propriété animation-delay). De même, par défaut, une animation n’affecte pas les valeurs de propriété une fois l’animation terminée (après écoulement du temps défini par la propriété animation-duration). La propriété animation-fill-mode est utilisée pour remplacer ces comportements par défaut. Sa syntaxe est indiquée ici :

PropriétéDescription

animation-fill-mode

Spécifie une ou plusieurs valeurs séparées par une virgule qui définissent le comportement de l’animation en dehors de son temps d’exécution. Cette propriété peut être définie avec une des valeurs suivantes :

none

Le comportement par défaut ne change pas.

forwards

La valeur finale de la propriété (définie dans la dernière trame clé) est conservée au terme de l’exécution de l’animation.

backwards

La première valeur de la propriété (définie dans la première trame clé) est appliquée avant l’affichage de l’animation, durant la période définie par animation-delay.

both

Les modes de remplissage en avant et en arrière sont appliqués.

 

Propriété animation

La propriété raccourcie animation regroupe six des propriétés d’animation en une seule propriété. Sa syntaxe est indiquée ici :

PropriétéDescription

animation

Spécifie un ou plusieurs ensembles de propriétés d’animation séparés par des espaces pour un ensemble de propriétés d’objet correspondantes. Les valeurs des propriétés de l’animation doivent être définies dans l’ordre suivant :

Si vous disposez de plusieurs ensembles des six valeurs de propriétés d’animation, vous devez les séparer par une virgule.

 

Examinons l’exemple de code suivant, qui définit plusieurs propriétés d’animation sur un élément div :


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


Avec la propriété du raccourci animation, vous pouvez spécifier l’ensemble de ces six propriétés sur une seule ligne, comme illustré ici :


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


Créer les trames clés

Ensuite, spécifiez les trames clés pour votre animation. Les trames clés vous permettent d’affiner les valeurs intermédiaires dans une animation. La règle @keyframes spécifie une liste de trames clés d’animation de propriétés pour un objet et un identificateur pour l’animation. Sa syntaxe est indiquée ici :

RègleDescription

@keyframes

Une liste de trames clés d’animation de propriétés pour un objet dans le document HTML. Cette règle permet de spécifier les valeurs des propriétés à différents points au cours d’une animation ainsi que l’identificateur de l’animation. Elle spécifie les valeurs des propriétés au cours d’un cycle d’une animation. (L’animation peut s’itérer une ou plusieurs fois.)

Cette règle utilise les sélecteurs de trame clé pour spécifier les valeurs des propriétés à différents stades de l’animation. Les sélecteurs de trame clé peuvent être déclarés en tant que from (équivalent à 0 %), to (équivalent à 100 %) et en tant que pourcentages.

 

L’exemple suivant montre trois sélecteurs de trame clé, chacun avec deux descripteurs de trame clé.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

Dans cet exemple, les trames clés sont spécifiées pour trois points au cours de l’animation : le début (la valeur from ou 0 %), 40 % et la fin (la valeur to ou 100 %).

Vous pouvez également spécifier la fonction de chronométrage qui doit être utilisée lorsque l’animation passe à la trame clé suivante. Incluez simplement la propriété animation-timing-function dans le sélecteur de trame clé approprié.

Appliquer l’animation

Enfin, appliquez le style de l’animation à un élément. En général, cela est déclenché par un événement, comme un clic sur un bouton (ou une pression). Notez qu’une animation CSS ne peut pas être interrompue en changeant les valeurs de ses propriétés, comme c’est le cas avec les transitions. Une animation CSS ne peut être interrompue qu’en utilisant la propriété animation-play-state, ou en ajoutant ou supprimant le nom de l’animation.

Lorsque l’exécution de l’animation est terminée, les valeurs d’origine des propriétés animées sont rétablies.

Exemple

L’exemple suivant montre une animation CSS. Elle a été créée à l’aide de la démonstration des animations sur le site IE Test Drive.

Pour commencer, nous allons créer un élément div avec du texte auquel nous allons appliquer des styles :


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


Pour voir l’apparence de ce code, affichez cette page.

Définissons maintenant des paramètres pour l’animation. Nous allons ajouter un sélecteur à la section style qui utilise la pseudo-classe :active. Cela signifie que l’animation ne se produira que lorsque l’utilisateur clic et appuie (ou touche et appuie) sur le bloc de texte. L’animation s’exécute jusqu’à son terme.

Pour que l’animation commence immédiatement, dure 5 secondes, se répète une fois (pour 2 itérations maximum) et soit identifiée avec le nom « demo », nous ajoutons le sélecteur suivant :


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

Créons maintenant trois trames clés—une pour le début, une pour le milieu et une pour la fin de l’animation. Dans chaque trame clé, nous allons définir les propriétés qui changeront et les fonctions de chronométrage pour définir la fréquence du changement.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

Nous avons défini deux propriétés à animer, background-color et transform. Au cours d’un seul cycle de l’animation, la couleur d’arrière-plan de l’élément div s’anime en passant du vert (couleur d’origine) au violet, puis au bleu. L’élément div se déplace également vers la droite et vers le bas de 20 et 30 pixels, respectivement, puis revient à sa position d’origine. L’animation utilise la fonction de chronométrage ease pour animer à partir du point de départ jusqu’au point à mi-chemin (trame clé à 50 %), puis la fonction de chronométrage ease-in pour animer du point à mi-chemin jusqu’au point de fin. L’animation se répète une fois.

Affichez cette animation. (Internet Explorer 10 est requis.)

Événements DOM d’animations

Internet Explorer 10 et les applications du Windows Store en JavaScript définissent trois événements DOM (Document Object Model) d’animation :

animationstart

L’événement animationstart se produit au début de l’animation, en tenant compte des éventuels retards de l’animation (tel que spécifié par la propriété animation-delay), si nécessaire. Une valeur négative de cette propriété déclenche l’événement avec un temps écoulé égal à la valeur absolue du retard.

animationend

L’événement animationend se produit à la fin de l’animation.

animationiteration

L’événement animationiteration se produit à la fin de chaque itération d’une animation. Cet événement se produit uniquement quand la propriété animation-iteration-count est supérieure à un.

  • Se propage : Oui
  • Annulable : Oui

Cet exemple anime un élément <div>, puis déclenche les événements animationend, animationend et animationiteration pour changer le texte contenu dans la zone. Testez l’exemple en ligne.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


Informations de référence sur les API

Animations

Exemples et didacticiels

Comment donner vie à votre page Web à l’aide d’animations, de transitions et de transformations CSS

Démonstrations du site Internet Explorer Test Drive

Hands On: Animations
Bringing pages alive with CSS Transforms & Animations
Beta Fish IE

Billets IEBlog

Renforcer la personnalité d’un site grâce aux transitions et animations CSS3
Animations pleine page avec CSS
Transformations 3D CSS3 dans IE10

Spécification

CSS Animations

Rubriques connexes

Créer des applications époustouflantes avec des animations CSS3
Animation CSS3 avec des requêtes jQuery de secours

 

 

Microsoft réalise une enquête en ligne pour recueillir votre opinion sur le site Web de MSDN. Si vous choisissez d’y participer, cette enquête en ligne vous sera présentée lorsque vous quitterez le site Web de MSDN.

Si vous souhaitez y participer,
Afficher:
© 2014 Microsoft