blob: a1fea3e358eb56f6fec327f89fa4b3627faa0f46 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: offset-distance
slug: Web/CSS/offset-distance
tags:
- CSS
- Propriété
- Reference
- motion-offset
- offset-distance
translation_of: Web/CSS/offset-distance
---
{{CSSRef}}{{SeeCompatTable}}
La propriété **`offset-distance`** définit une position le long d'un chemin {{CSSxRef("offset-path")}}.
## Syntaxe
```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;
```
- `{{cssxref('<length-percentage>')}}`
- : Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}). La valeur 100% représente la longueur totale du chemin (lorsque `offset-path` est défini par une forme simple ou grâce à la fonction `path()`).
### Syntaxe formelle
{{CSSSyntax}}
## Exemples
### Animation
La notion de mouvement contenue dans _CSS Motion Path_ vient principalement de la propriété `offset-distance`. 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 `offset-distance` de `0%` à `100%`.
#### HTML
```html
<div id="motion-demo"></div>
```
#### CSS
```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%;
}
}
```
#### Résultat
{{EmbedLiveSample('Animation')}}
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
| {{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
{{CSSInfo}}
> **Note :** Dans les versions antérieures de la spécification, cette propriété était intitulée `motion-offset`.
## Compatibilité des navigateurs
{{Compat("css.properties.offset-distance")}}
|
