1 files changed, 154 insertions, 0 deletions
diff --git a/files/fr/tools/performance/scenarios/animating_css_properties/index.html b/files/fr/tools/performance/scenarios/animating_css_properties/index.html
new file mode 100644
index 0000000000..b2767f6b32
--- /dev/null
+++ b/files/fr/tools/performance/scenarios/animating_css_properties/index.html
@@ -0,0 +1,154 @@
+---
+title: Animer des propriétés CSS
+slug: Outils/Performance/Scenarios/Animating_CSS_properties
+translation_of: Tools/Performance/Scenarios/Animating_CSS_properties
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary">
+<p>Le cout en performance des animations CSS peuvent varier d'une propriété à une autre, et animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (<a href="/fr/docs/Glossary/Jank">jank</a>) tandis que le navigateur se débat pour obtenir un frame rate fluide.</p>
+
+<p>Le <a href="/fr/docs/Tools/Performance/Frame_rate">Frame rate</a> et la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> peuvent fournir des renseignements sur les opérations que fait le navigateur lors d'une animation CSS, dans le but d'aider à diagnostiquer les problèmes de performances.</p>
+</div>
+
+<p>Avec les <a href="/fr/docs/Web/Guide/CSS/Using_CSS_animations">animations CSS</a>, il est possible de spécifier un nombre <a href="/fr/docs/Web/CSS/@keyframes">keyframes</a>, chacune de celle-ci utilisent du CSS pour définir l'apparence d'un élément à un moment donné de l'animation. Le navigateur crée l'animation comme étant une transition d'une keyframe à une autre.</p>
+
+<p>Comparées à l'animation via JavaScript, les animations CSS peuvent être plus faciles à créer. Elles peuvent également donner de meilleures performances, car elles donnent plus de contrôle au navigateur pour afficher les frames au bon moment et les supprimer si nécessaire.</p>
+
+<p>Cependant, le cout en performances de la modification des propriétés CSS varient d'une propriété à une autre. Animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (<a href="/fr/docs/Glossary/Jank">jank</a>) tandis que le navigateur se débat pour obtenir un frame rate fluide.</p>
+
+<h2 id="La_chronologie_du_rendu_CSS">La chronologie du rendu CSS</h2>
+
+<p>Le processus que le navigateur utilise pour mettre à jour la page lorsqu'une propriété CSS a changé peut être décrit comme une chronologie consistant des étapes suivantes :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10821/css-rendering-waterfall.png" style="display: block; height: 203px; margin-left: auto; margin-right: auto; width: 546px;"></p>
+
+<ol>
+ <li><strong>Recalculate Style (recalculer le style) </strong>: à chaque fois qu'une propriété CSS d'un élément change, le navigateur doit recalculer les styles calculés.</li>
+ <li><strong>Layout (disposition) </strong>: ensuite, le navigateur utilise les styles calculés pour trouver la position et la géométrie des éléments. Cette opération est appelée "layout" mais peut être également appelée "reflow".</li>
+ <li><strong>Paint</strong> (affichage) : enfin, le navigateur doit repeindre les éléments à l'écran. Une dernière étape qui n'est pas montrée dans cette séquence : la page peut être séparée en calques qui sont affichés indépendamment, puis combinés dans un processus appelé "Composition".</li>
+</ol>
+
+<p>Cette séquence doit tenir dans une seule frame, vu que l'écran n'est pas mis à jour avant sa complétion. Il est généralement accepté que 60 frames par secondes est le frame rate auquel les animations apparaitront fluides. Un frame rate de 60 frames par secondes (fps) donne au navigateur 16.7 millisecondes pour exécuter entièrement cette séquence.</p>
+
+<h2 id="Cout_des_propriétés_CSS">Cout des propriétés CSS</h2>
+
+<p>Lors de l'exécution de la chronologie du rendu CSS, certaines propriétés sont plus couteuses que d'autres :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom de la propriété</th>
+   <th scope="col">Cout</th>
+   <th scope="col">Exemples</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Les propriétés qui impactent la forme d'un élément ou sa position déclenchent une recalculation du style, une disposition, et un repaint.</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10825/layout.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+    <p><code><a href="/fr/docs/Web/CSS/left">left</a></code><br>
+     <code><a href="/fr/docs/Web/CSS/max-width">max-width</a></code><br>
+     <code><a href="/fr/docs/Web/CSS/border-width">border-width</a></code><br>
+     <code><a href="/fr/docs/Web/CSS/margin-left">margin-left</a></code><br>
+     <code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Les propriétés qui n'impactent pas la forme d'un élément ou sa position, mais qui ne sont pas dans leur propre calque, ne déclenchent pas de disposition (layout)</p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+    <p><code><a href="/fr/docs/Web/CSS/color">color</a></code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Les propriétés dans leur propre calque ne déclenchent même pas un repaint, car la mise à jour est gérée dans la composition.</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10839/paint-faint.png" style="height: 26px; width: 123px;"></td>
+   <td><code><a href="/fr/docs/Web/CSS/transform">transform</a></code><br>
+    <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Le site web <a href="http://csstriggers.com/">CSS Triggers</a> affiche le cout pour chacune des propriétés CSS. Cela n'est valable que pour les navigateurs WebKit, mais la plupart des couts seront les mêmes dans tous les navigateurs récents.</p>
+</div>
+
+<h2 id="Example_margin_contre_transform">Example : <code>margin </code>contre <code>transform</code></h2>
+
+<p>Dans cette section, la façon dont la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> peut mettre en évidence la différence entre une animation utilisant <code><a href="/fr/docs/Web/CSS/margin">margin</a></code> et une utilisant <code><a href="/fr/docs/Web/CSS/transform">transform </a></code>serra démontrée.</p>
+
+<p>L'intention de ce scénario n'est pas de convaincre que l'animation en utilisant <code>margin</code> est forcement une mauvaise idée. Mais plutôt de démontrer comment les outils de développement peuvent donner une idée du travail qu'effectue le navigateur pour afficher un site web, et comment utiliser ces renseignements pour régler les problèmes de performance..</p>
+
+<p>Si vous voulez expérimenter en même temps, le site de la démo est disponible <a href="http://mdn.github.io/performance-scenarios/animation-transform-margin/index.html">ici</a>. Il ressemble à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11029/css-animations-demo.png" style="display: block; height: 677px; margin-left: auto; margin-right: auto; width: 1000px;">Le site comporte deux boutons : un pour démarrer/arrêter l'animation, et un groupe pour sélectionner le type d'animation.</p>
+
+<p>Il y a quelques éléments, et ceux-ci ont les propriétés CSS <code><a href="/fr/docs/Web/CSS/linear-gradient">linear-gradient</a></code> et <code><a href="/fr/docs/Web/CSS/box-shadow">box-shadow</a></code>, car elles sont relativement couteuses.</p>
+
+<p>Il existe également une version vidéo de cette démo.</p>
+
+<p>{{EmbedYouTube("Tvu6_j8Qzfk")}}</p>
+
+<h3 id="Animer_en_utilisant_margin">Animer en utilisant margin</h3>
+
+<p>Il faut laisser l'option "Use margin" sélectionnée, puis lancer l'animation. Il faut ensuite ouvrir l'outil Performances (maj+F5) et faire un enregistrement, seulement quelques secondes sont nécessaires.</p>
+
+<p>En ouvrant l'enregistrement, ce que vous verrez dépend grandement de votre machine et de la charge du système, mais cela devrait ressembler à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10853/margin-recording.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Cette capture d'écran montre trois vues distinctes : une vue d'ensemble de la chronologie, le frame rate, et les détails de la frise chronologique.</p>
+
+<h4 id="Vue_densemble_de_la_chronologie">Vue d'ensemble de la chronologie</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10857/margin-timeline-overview.png" style="display: block; height: 58px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Il s'agit d'une représentation compressée de la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>. La prédominance du vert révèle que <a href="/fr/docs/Tools/Performance/Timeline#timeline-color-coding">la page passe beaucoup de temps à peindre.</a>.</p>
+
+<h4 id="Frame_rate">Frame rate</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10859/margin-frame-rate.png" style="display: block; height: 64px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Cette partie montre le <a href="/fr/docs/Tools/Performance/Frame_rate">frame rate</a>. Le frame rate moyen est de 46.67fps, bien en dessous de la cible de 60fps. Pire, le frame rate n'est pas du tout constant, avec un nombre conséquent de décentes dans les 20fps. Il est donc peu probable que l'animation soit fluide, surtout si une interaction utilisateur est ajoutée.</p>
+
+<h4 id="Chronologie">Chronologie</h4>
+
+<p>Le reste de l'enregistrement montre la vue de la chronologie. En faisant défiler un peu, on trouve le pattern suivant :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10861/margin-timeline.png" style="display: block; height: 532px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Cela représente la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#The_CSS_rendering_waterfall">chronologie du rendu</a>. À chaque frame de l'animation, les styles de chaque élément sont recalculés, puis composés en une seule disposition, et enfin le repaint a lieu.</p>
+
+<p>Il est facile de voir que le paint prend beaucoup de performance ici. Dans la capture d'écran ci-dessus, une opération paint est mise en surbrillance. La partie sur la droite révèle que cette opération prend 13.11ms. Avec seulement 16.7ms de budget temps par frame, il n'est pas surprenant d'avoir un frame rate si bas.</p>
+
+<p>Vous pouvez expérimenter avec l'exemple : essayez d'enlever la propriété <code>box-shadow</code> en utilisant <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">l'Inspecteur</a>, et regardez comment cela affecte le temps que prend paint. Par la suite, nous verrons comment utiliser <code><a href="/fr/docs/Web/CSS/transform">transform</a></code> au lieu de <code><a href="/fr/docs/Web/CSS/margin">margin</a></code> élimine complètement ces paint couteux.</p>
+
+<h3 id="Animer_en_utilisant_transform">Animer en utilisant transform</h3>
+
+<p>En cliquant sélectionnant l'option "Use transform", et en effectuant un nouvel enregistrement, on obtient quelque chose ressemblant à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10863/transform-recording.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h4 id="Vue_densemble_de_la_chronologie_2">Vue d'ensemble de la chronologie</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10869/transform-timeline-overview.png" style="display: block; height: 57px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>En comparaison avec la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview"> version utilisant margin</a>, on remarque beaucoup moins de vert et beaucoup plus de rose, ce qui peut être <a href="/fr/docs/Tools/Performance/Waterfall#timeline-color-coding">soit du positionnement soit de la recalculation de style.</a></p>
+
+<h4 id="Frame_rate_2">Frame rate</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10865/transform-frame-rate.png" style="display: block; height: 62px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>En comparaison avec la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview"> version utilisant margin</a>, cela semble bien mieux. Le frame rate moyen est quasiment à 60fps et le frame rate est quasiment constant.</p>
+
+<h4 id="Chronologie_2">Chronologie</h4>
+
+<p>La frise chronologique montre la raison pour laquelle le frame rate s'est amélioré. The timeline view shows the reason for the improved frame rate. Contrairement à la <a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties#Waterfall_overview"> version utilisant margin</a> aucun temps n'est dépensé dans la disposition ou dans paint :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10867/transform-timeline.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Dans ce cas-là, utiliser <code>transform</code> a considérablement amélioré la performance du site, et l'outil de performance permet de voir comment et pourquoi.</p>