diff options
Diffstat (limited to 'files/fr/web/css/offset-distance/index.html')
| -rw-r--r-- | files/fr/web/css/offset-distance/index.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html new file mode 100644 index 0000000000..ea1a89b020 --- /dev/null +++ b/files/fr/web/css/offset-distance/index.html @@ -0,0 +1,100 @@ +--- +title: offset-distance +slug: Web/CSS/offset-distance +tags: + - CSS + - Propriété + - Reference + - motion-offset + - offset-distance +translation_of: Web/CSS/offset-distance +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>offset-distance</code></strong> définit une position le long d'un chemin {{CSSxRef("offset-path")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Valeur par défaut */ +offset-distance: 0; + +/* La position à la moitié de offset-path */ +offset-distance: 50%; + +/* Une position absolue le long du chemin */ +offset-distance: 40px;</pre> + +<dl> + <dt><code>{{cssxref('<length-percentage>')}}</code></dt> + <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).</dd> + <dd>La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Animation">Animation</h3> + +<p>La notion de mouvement contenue dans <em>CSS Motion Path</em> vient principalement de la propriété <code>offset-distance</code>. Si on souhaite animer un élément le long du chemin, on définira un chemin avec {{cssxref('offset-path')}} et on utilisera une animation qui fera évoluer <code>offset-distance</code> de <code>0%</code> à <code>100%</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div id="motion-demo"></div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#motion-demo { + offset-path: path('M20,20 C20,100 200,0 200,100'); + animation: move 3000ms infinite alternate ease-in-out; + width: 40px; + height: 40px; + background: cyan; +} + +@keyframes move { + 0% { + offset-distance: 0%; + } + 100% { + offset-distance: 100%; + } +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Animation')}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}</td> + <td>{{Spec2('Motion Path Level 1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Dans les versions antérieures de la spécification, cette propriété était intitulée <code>motion-offset</code>.</p> +</div> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.properties.offset-distance")}}</p> |