mozilla
Vos résultats de recherche

    Animations CSS

    Les animations CSS rendent possible la création de transitions animées depuis une décoration CSS à une autre. Les animations consistent en deux composants : un style décrivant l'animation et un ensemble de keyframes qui indique les états de début et de fin du style CSS de l'animation, ainsi que des points de passage intermédiaires.

    On compte trois avantages des animations CSS par rapport aux techniques d'animation utilisant des scripts habituelles :

    1. Elles sont faciles à utiliser pour les animations simples ; leur création est possible sans aucune connaissance en JavaScript.
    2. Les animations sont fluides, même avec un système plutôt chargé. De simples animations JavaScript peuvent parfois être lentes (sauf si elles sont réalisées intelligemment). La machine de rendu peut utiliser le frame-skipping et d'autres techniques afin de conserver les performances aussi bonnes que possible.
    3. Laisser le navigateur contrôler la séquence d'animation permet au navigateur d'optimiser sa performance et son efficacité en réduisant la fréquence de mise à jour des animations dans les onglets non visibles par exemple. 

    Configuration de l'animation

    Pour créer une séquence animée en CSS, il faut décorer l'élément que vous souhaitez animer à l'aide de la propriété animation et de ses sous-propriétés. Ceci vous permet de configurer la temporisation et la durée de l'animation, ainsi que d'autres détails concernant la manière dont l'animation se déroule. Ceci ne définit pas l'apparence réelle de l'animation, qui est elle définie par les règles @keyframes comme défini dans Définition de la séquence en utilisant les keyframes ci-dessous.

    Les sous-propriétés de la propriété animation sont :

    animation-delay
    Configure le délai entre l'instant auquel l'élément est chargé et le début de l'animation.
    animation-direction
    Configure si l'animation doit se jouer tour à tour en avant puis en arrière à chaque cycle de la séquence ou si elle doit revenir à son point de départ ou se répéter.
    animation-duration
    Configure la durée que l'animation doit utiliser pour compléter un cycle.
    animation-iteration-count
    Configure le nombre de fois que l'animation doit se répéter : vous pouvez définir infinite pour que l'animation se répète indéfiniment.
    animation-name
    Défini le nom de la règle @keyframes décrivant les keyframes de l'animation.
    animation-play-state
    Vous permet de mettre en pause et de reprendre la lecture de la séquence animée.
    animation-timing-function
    Configure la temporisation de l'animation ; c'est-à-dire, comment l'animation se déroule entre les keyframes, en définissant les courbes d'accélération.
    animation-fill-mode
    Configure les valeurs qui doivent être appliquée par l'animation avant et après qu'elle soit exécutée.

    Définition de la séquence en utilisant les keyframes

    Une fois la temporisation de l'animation définie, il est nécessaire de définir l'apparence de l'animation. Ceci est réalisé en mettant en place une keyframe ou plus en utilisant les règles @keyframes. Chaque keyframe décrit comment l'élément animé doit être rendu à un certain instant de la séquence animée.

    Puisque la temporisation de l'animation est définie dans le style CSS qui configure l'animation, les keyframes utilisent un percentage pour indiquer l'instant dans la séquence à laquelle elle est située. 0% indique le premier instant de la séquence, tandis que 100% indique l'instant final de l'animation. Ces deux instants doievent être spécifiés pour que le navigateur sache où l'animation doit commencer et terminer ; puisqu'elle sont primordiales, ces deux instants ont aussi des alias particuliers : from et to.

    Vous pouvez aussi ajouter des keyframes additionnelles qui décrivent des état intermédiaires entre le point de départ et le point d'arrivée de l'animation.

    Exemples

    Note : les exemples ci-dessous utilisent le préfixe -moz- sur les propriétés des animations CSS pour rester brefs ; les exemples cliquables pour voir le résultat dans votre navigateur incluent aussi les versions utilisant le préfixe -webkit-.

    Faire glisser un texte d'un bord à l'autre de la fenêtre

    Cet exemple simple décore l'élément <h1> de telle manière que le texte translate du côté droit de la fenêtre jusqu'à l'autre bord.

    <style type="text/css">
      h1 {
        animation-duration: 3s;
        animation-name: slidein;
      }
      
      @keyframes slidein {
        from {
          margin-left: 100%;
          width: 300%
        }
        
        to {
          margin-left: 0%;
          width: 100%;
        }
      }
    </style>
    

    La décoration appliquée à l'élément <h1> défini que l'animation doit prendre 3 secondes pour s'exécuter du début à la fin grâce à la propriété animation-duration, et que le nom de la règle @keyframes qui défini les keyframes de l'animation se nomment « slidein ».

    Si nous souhaitions une décoration différente sur l'élément <h1> qui ne supportent pas les animations CSS, nous l'aurions ajouté à cet endroit ; toutefois, dans ce cas nous ne souhaitons pas d'autre décoration que l'effet d'animation.

    Les keyframes sont définies en utilisant la règle @keyframes. Dans ce cas, nous utilisons seulement deux keyframes. La première a lieu à 0% (en utilisant l'alias from). Ici, nous configurons la marge à gauche de l'élément pour qu'elle vaille 100% (c'est-à-dire, le bord droit de l'élément contenant), et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément contenant). Ceci fait que dans la première image de l'animation l'en-tête est affichée en-dehors de la zone visible dans la fenêtre.

    La seconde et dernière keyframe est définie à 100% (en utilisant l'alias to). Ceci fait en sorte que l'en-tête finisse l'animation en se retrouvant aligné à gauche de la zone de contenu.

    Voir l'exemple sur une page

    Ajouter une autre keyframe

    Ajoutons une nouvelle keyframe à l'exemple précédent. Admettons que nous souhaitons que la taille de l'en-tête augmente en même temps qu'elle se déplace vers la gauche pendant un certain temps puis qu'elle réduise à sa taille originale. Cet exemple est simple puisqu'il suffit d'ajouter la keyframe suivante :

    75% {
      font-size: 300%;
      margin-left: 25%;
      width: 150%;
    }
    

    Ceci déclare que navigateur qu'à 75% de la séquence d'animation, l'en-tête doit avoir une marge à gauche de 25% et une largeur de 150%.

    Voir l'exemple sur une page

    Faire se répéter l'animation

    Pour se faire répéter l'animation, il suffit d'utilier la propriété animation-iteration-count pour indiquer le nombre de répétition que nous souhaitons réaliser. Dans ce cas, utilisons infinite pour que l'animation se répète indéfiniment :

    h1 {
      animation-duration: 3s;
      animation-name: slidein;
      animation-iteration-count: infinite;
    }
    

    Voir l'exemple sur une page

    Faire aller et revenir l'élément

    L'exemple précédent faisait se répéter l'animation, mais c'est assez étrange de voir l'élément retourner instantanément à son point de départ à chaque cycle. Ce que nous souhaitons vraiment voir ce sont des aller-retour à l'écran. Ceci est réalisé aisément en définissant la propriété animation-direction à alternate:

    h1 {
      animation-duration: 3s;
      animation-name: slidein;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    

    Voir l'exemple sur une page

    Utiliser les évènements des animations

    Il est possible d'avoir plus de contrôle sur les animations -- ainsi que des informations utiles à leur propos -- en utilisant les évènements liés aux animations. Ces évènements, représentés par l'objet AnimationEvent, peuvent être utilisés pour détecter quand une animation démarre, se termine ou commence un nouveau cycle. Chaque évènement inclue l'instant auquel il survient ainsi que le nom de l'animation qui a déclenché l'évènement.

    Nous allons modifier l'exemple du texte glissant pour obtenir quelques informations à propos de chaque évènement quand il survient, de manière à comprendre comment ils fonctionnent.

    Ajouter les détecteurs d'évènements aux animations

    Nous allons utiliser du code JavaScript afin d'écouter les trois types d'évènements qui existent pour les animations. La fonction setup() configure nos détecteurs d'évènements ; nous l'appelons quand le document se charge pour la première fois de manière à mettre en place les éléments.

    function setup() {
      var e = document.getElementById("watchme");
      e.addEventListener("animationstart", listener, false);
      e.addEventListener("animationend", listener, false);
      e.addEventListener("animationiteration", listener, false);
      
      var e = document.getElementById("watchme");
      e.className = "slidein";
    }
    

    Ce code est relativement standard ; vous pouvez trouver plus de détails dans la documentation pour les element.addEventListener(). La dernière chose que la fonction setup() réalise est d'ajouter la class « slidein » à l'élément que nous allons animer ; nous faisons cela afin de lancer l'animation.

    Pourquoi ? La raison est que l'évènement animationstart survient dès que l'animation débute, et dans notre cas, ceci arrive avant que notre code soit interprété. Ainsi nous lançons l'animation nous-mêmes en définissant la classe de l'élément à celle pour laquelle l'animation se déclenche.

    Recevoir les évènements

    Les évènement sont reçus par la fonction listener(), qui est décrite ci-dessous :

    function listener(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "animationstart":
          l.innerHTML = "Début : le temps écoulé est " + e.elapsedTime;
          break;
        case "animationend":
          l.innerHTML = "Terminé : le temps écoulé est " + e.elapsedTime;
          break;
        case "animationiteration":
          l.innerHTML = "Nouveau cycle commencé au temps " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }
    

    Ceci code, lui aussi, est très simple. Il regarde event.type pour déterminer quel type d'évènement a eu lieu, puis il ajouter une notre appropriée à la liste non ordonnée <ul> que nous utilisons pour lister ces évènements.

    La sortie, quand tout est dit et réalisé, ressemble à quelque chose de la sorte :

    • Début : le temps écoulé est 0
    • Nouveau cycle commencé au temps 3.01200008392334
    • Nouveau cycle commencé au temps 6.00600004196167
    • Terminé : le temps écoulé est 9.234000205993652

    Il faut noter que les instants sont très proches, mais pas exactement, de ceux attendus lorsque la temporisation est établie lors de la définition de l'animation. Il faut aussi noter que lors de la dernière itération de l'animation, l'évènement animationiteration n'est pas créé ; l'évènement animationend est créé à la place.

    Le HTML

    Afin que tout soit complet, voici le HTML qui affiche le contenu de la page, et contient la liste dans laquelle le script insère les informations à propos des évènements reçus :

    <body onload="setup()">
      <h1 id="watchme">Watch me move</h1>
      <p>This example shows how to use CSS animations to make <code>H1</code> elements
      move across the page.</p>
      <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
      <ul id="output">
      </ul>
    </body>
    

    Voir l'exemple sur une page

    Voir également

     

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, FredB, lapinter
    Dernière mise à jour par : lapinter,