From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../detecting_css_animation_support/index.html | 99 ++++++ files/fr/web/css/css_animations/index.html | 81 +++++ files/fr/web/css/css_animations/tips/index.html | 165 ++++++++++ .../css_animations/using_css_animations/index.html | 363 +++++++++++++++++++++ 4 files changed, 708 insertions(+) create mode 100644 files/fr/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/fr/web/css/css_animations/index.html create mode 100644 files/fr/web/css/css_animations/tips/index.html create mode 100644 files/fr/web/css/css_animations/using_css_animations/index.html (limited to 'files/fr/web/css/css_animations') diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..a2cb1bd5a3 --- /dev/null +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,99 @@ +--- +title: Détecter la prise en charge des animations CSS +slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS +tags: + - Avancé + - CSS + - Obsolete +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{CSSRef}}{{obsolete_header}}
+ +
+

Attention ! Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.

+
+ +

Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS.

+ +

Détecter la prise en charge des animations CSS

+ +

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

+ +
var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

+ +

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

+ +

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

+ +

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

+ +

Appliquer des animations avec la bonne syntaxe selon le navigateur

+ +

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

+ +
if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

+ +

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

+ +

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

+ +

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

+ +

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

+ +

Voir dans JSFiddle

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html new file mode 100644 index 0000000000..acc7ab6997 --- /dev/null +++ b/files/fr/web/css/css_animations/index.html @@ -0,0 +1,81 @@ +--- +title: Les animations CSS +slug: Web/CSS/Animations_CSS +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Règles @ CSS

+ +
+ +
+ +

Guides

+ +
+
Détecter la prise en charge des animations CSS
+
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
+
Manipuler les animations CSS
+
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
+
Conseils pour les animations CSS
+
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Propriété animation

+ + + +

{{Compat("css.properties.animation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..bb79f19722 --- /dev/null +++ b/files/fr/web/css/css_animations/tips/index.html @@ -0,0 +1,165 @@ +--- +title: Trucs et astuces pour les animations CSS +slug: Web/CSS/Animations_CSS/Conseils +tags: + - Animations CSS + - CSS + - Exemple + - Guide + - Tutoriel +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

+ +

Relancer une animation

+ +

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

+ +

CSS

+ +

Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

+ +

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

+ +

HTML

+ +

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

+ +
<div class="box">
+</div>
+
+<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
+ +

JavaScript

+ +

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

+ +

Voici ce qui se produit lorsque la fonction play() est appelée :

+ +
    +
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. +
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. +
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. +
+ +

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

+ +

Arrêter une animation

+ +

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

+ +
    +
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. +
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. +
+ +

Ces pistes sont utilisées dans la démonstration suivante :

+ +

CSS

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +

HTML

+ +
<h1 id="watchme">Cliquer pour arrêter</h1>
+
+ +

JavaScript

+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Résultat

+ +

{{EmbedLiveSample("Arrêter_une_animation")}}

+ +

Voir cette démo

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..4010492e3d --- /dev/null +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,363 @@ +--- +title: Utiliser les animations CSS +slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS +tags: + - Avancé + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

+ +

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

+ +
    +
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. +
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. +
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. +
+ +

Paramétrer l'animation

+ +

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

+ +

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

+ +
+
{{cssxref("animation-delay")}}
+
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
+
{{cssxref("animation-direction")}}
+
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
+
{{cssxref("animation-duration")}}
+
Cette propriété définit la durée d'un cycle de l'animation.
+
{{cssxref("animation-fill-mode")}}
+
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
+
{{cssxref("animation-iteration-count")}}
+
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
+
{{cssxref("animation-name")}}
+
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
+
{{cssxref("animation-play-state")}}
+
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
+
{{cssxref("animation-timing-function")}}
+
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
+
+ +

Définir les étapes composant une animation (@keyframes)

+ +

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

+ +

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

+ +

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

+ +

Exemples

+ +
Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
+ +

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

+ +

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

+ +

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

+ +

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

+ +

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

+ +

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

+ +

Ajouter une autre étape

+ +

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

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

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

+ +

Répéter une animation

+ +

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

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

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

+ +

Obtenir un effet aller-retour

+ +

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

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

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

+ +

Utiliser la propriété raccourcie animation

+ +

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

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

On peut la réécrire de façon plus concise :

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.

+
+ +

Utiliser plusieurs valeurs pour différentes animations

+ +

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

+ +

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Utiliser les événements liés aux animations

+ +

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

+ +

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

+ +

La feuille de style CSS

+ +

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Les gestionnaires d'événements

+ +

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

+ +

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

+ +

Écouter les événements

+ +

Les événements sont transmis à la fonction listener() décrite ici :

+ +
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

+ +

Le résultat obtenu devrait ressembler à quelque chose comme :

+ + + +

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

+ +

Le document HTML

+ +

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

+ +
<h1 id="watchme">Regardez-moi bouger</h1>
+<p>
+  Un exemple d'animation CSS pour déplacer
+  un élément <code>H1</code> sur une page.
+</p>
+<p>
+  Voici les événements relatifs aux animations :
+</p>
+<ul id="output">
+</ul>
+</body>
+
+ +

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf