aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/transition-duration/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/transition-duration/index.html')
-rw-r--r--files/fr/web/css/transition-duration/index.html279
1 files changed, 42 insertions, 237 deletions
diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html
index 6cce9a7304..d24b28832a 100644
--- a/files/fr/web/css/transition-duration/index.html
+++ b/files/fr/web/css/transition-duration/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/transition-duration
<div>{{EmbedInteractiveExample("pages/css/transition-duration.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>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p>
<h2 id="Syntaxe">Syntaxe</h2>
@@ -46,267 +44,74 @@ transition-duration: unset;
<h2 id="Exemples">Exemples</h2>
-<div>
-<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 0.5s</code></p>
+<h3 id="exemple_illustrant_differentes_durees">Exemple illustrant différentes durées</h3>
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
+<h4>HTML</h4>
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
- -webkit-transition-duration:0.5s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transform color;
- transition-duration:0.5s;
- transition-timing-function: ease-in-out;
-}
-.box1{
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
- -webkit-transition-duration:0.5s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transformv color;
- transition-duration:0.5s;
- transition-timing-function: ease-in-out;
-}
-</pre>
+<pre class="brush:html">
+ &lt;div class="box duration-1"&gt;0,5 secondes&lt;/div&gt;
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
+ &lt;div class="box duration-2"&gt;2 secondes&lt;/div&gt;
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
+ &lt;div class="box duration-3"&gt;4 secondes&lt;/div&gt;
-var intervalID = window.setInterval(updateTransition, 7000);
+ &lt;button id="change"&gt;Changer&lt;/button&gt;
</pre>
-</div>
-
-<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
-</div>
-<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 1s</code></p>
+<h4>CSS</h4>
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
+<pre class="brush:css;">
.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
- -webkit-transition-duration:1s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform color;
- transition-duration:1s;
- transition-timing-function: ease-in-out;
-}
-.box1{
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
- -webkit-transition-duration:1s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transform color;
- transition-duration:1s;
- transition-timing-function: ease-in-out;
+ margin: 20px;
+ padding: 10px;
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ font-size: 18px;
+ transition-property: background-color font-size transform color;
+ transition-timing-function: ease-in-out;
}
-</pre>
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
+.transformed-state {
+ transform: rotate(270deg);
+ background-color: blue;
+ color: yellow;
+ font-size: 12px;
+ transition-property: background-color font-size transform color;
+ transition-timing-function: ease-in-out;
}
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
-</div>
-
-<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 2s</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transform color;
- transition-duration:2s;
- transition-timing-function: ease-in-out;
+.duration-1 {
+ transition-duration: 0.5s;
}
-.box1{
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transform color;
- transition-duration:2s;
- transition-timing-function: ease-in-out;
-}
-</pre>
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
+.duration-2 {
+ transition-duration: 2s;
}
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
-</div>
-
-<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 4s</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
- -webkit-transition-duration:4s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transform color;
- transition-duration:4s;
- transition-timing-function: ease-in-out;
-}
-.box1{
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
- -webkit-transition-duration:4s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top transform -webkit-transform color;
- transition-duration:4s;
- transition-timing-function: ease-in-out;
+.duration-3 {
+ transition-duration: 4s;
}
</pre>
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
+<h4>JavaScript</h4>
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
+<pre class="brush:js">function change() {
+ const elements = document.querySelectorAll("div.box");
+ for (let element of elements) {
+ element.classList.toggle("transformed-state");
}
-
- return el;
}
-var intervalID = window.setInterval(updateTransition, 7000);
+const changeButton = document.querySelector("#change");
+changeButton.addEventListener("click", change);
</pre>
-</div>
-<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
-</div>
-</div>
+<h4>Résultat</h4>
+
+<div>{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}</div>
+
<h2 id="Spécifications">Spécifications</h2>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-28 11:38:25 +0000