diff options
Diffstat (limited to 'files/fr/web/css/animation/index.html')
| -rw-r--r-- | files/fr/web/css/animation/index.html | 13 |
1 files changed, 5 insertions, 8 deletions
diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html index 2458dfa40f..fd5be78c0d 100644 --- a/files/fr/web/css/animation/index.html +++ b/files/fr/web/css/animation/index.html @@ -27,8 +27,6 @@ translation_of: Web/CSS/animation <div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; @@ -40,8 +38,8 @@ translation_of: Web/CSS/animation animation: 3s slidein; </pre> -<div class="hidden" id="animation"> -<pre class="brush: html"><div class="grid"> +<h2 id="animation_example">Exemple d'animation</h2> +<pre class="brush: html hidden"><div class="grid"> <div class="col"> <div class="note"> Avec l'animation suivante : @@ -80,7 +78,7 @@ translation_of: Web/CSS/animation </div> </div></pre> -<pre class="brush: css">html,body { +<pre class="brush: css hidden">html,body { height: 100%; box-sizing: border-box; } @@ -172,7 +170,7 @@ button.restart { transform-origin: left center; }</pre> -<pre class="brush: js">window.addEventListener('load', function () { +<pre class="brush: js hidden">window.addEventListener('load', function () { var ANIMATION = Array.from(document.querySelectorAll('.animation')); var BUTTON = Array.from(document.querySelectorAll('button')); @@ -211,9 +209,8 @@ button.restart { btn.addEventListener('click', function () { playPause(index); }); }); })</pre> -</div> -<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}}</p> <p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p> |