diff options
Diffstat (limited to 'files/fr/web/css/transition-timing-function')
| -rw-r--r-- | files/fr/web/css/transition-timing-function/index.html | 18 |
1 files changed, 6 insertions, 12 deletions
diff --git a/files/fr/web/css/transition-timing-function/index.html b/files/fr/web/css/transition-timing-function/index.html index 6e456d5893..6581f0d272 100644 --- a/files/fr/web/css/transition-timing-function/index.html +++ b/files/fr/web/css/transition-timing-function/index.html @@ -13,8 +13,6 @@ translation_of: Web/CSS/transition-timing-function <div>{{EmbedInteractiveExample("pages/css/transition-timing-function.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> - <p>Cette courbe d'accelération est définie en utilisant une {{cssxref("<timing-function>")}} pour chacune des propriétés à animer.</p> <p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p> @@ -112,8 +110,7 @@ transition-timing-function: unset; <div> <h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> @@ -122,7 +119,7 @@ transition-timing-function: unset; <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div></pre> -<pre class="brush:css;">.parent {} +<pre class="brush:css hidden">.parent {} .parent > div[class] { width: 12em; min-width: 12em; @@ -144,7 +141,7 @@ transition-timing-function: unset; } </pre> -<pre class="brush:js">function updateTransition() { +<pre class="brush:js hidden">function updateTransition() { var els = document.querySelectorAll(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classList.toggle("box1"); @@ -153,7 +150,6 @@ transition-timing-function: unset; var intervalID = window.setInterval(updateTransition, 10000); </pre> -</div> <pre class="brush: css">.ease { transition-timing-function: ease; @@ -180,8 +176,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <div> <h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3> -<div class="hidden"> -<pre class="brush:html"><div class="parent"> +<pre class="brush:html hidden"><div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> @@ -190,7 +185,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <div class="step-end">step-end</div> </div></pre> -<pre class="brush:css;">.parent {} +<pre class="brush:css hidden">.parent {} .parent > div[class] { width: 12em; min-width: 12em; @@ -212,7 +207,7 @@ var intervalID = window.setInterval(updateTransition, 10000); } </pre> -<pre class="brush:js">function updateTransition() { +<pre class="brush:js hidden">function updateTransition() { var els = document.querySelectorAll(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classList.toggle("box1"); @@ -221,7 +216,6 @@ var intervalID = window.setInterval(updateTransition, 10000); var intervalID = window.setInterval(updateTransition, 10000); </pre> -</div> <pre class="brush: css">.jump-start { transition-timing-function: steps(5, jump-start); |