offset
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété offset est une propriété raccourcie pour les propriétés offset-path, offset-position, offset-distance, offset-rotate et offset-anchor. Elle permet d'animer un élément sur un tracé défini.
Note :
Dans les premières versions de la spécification, cette propriété était intitulée motion.
Syntaxe
css
/* Position de décalage */
offset: auto
offset: 10px 30px;
offset: none;
/* Chemin de décalage */
offset: ray(45deg closest-side);
offset: path(M 100 100 L 300 100 L 200 300 z);
offset: url(arc.svg);
/* Chemin de décalage avec une distance et/ou */
/* une rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;
/* Gestion d'une ancre de décalage */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :
|
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
| Crée un contexte d'empilement | oui |
Syntaxe formelle
offset =
[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?
<offset-position> =
normal |
auto |
<position>
<offset-path> =
none |
<offset-path> || <coord-box>
<offset-distance> =
<length-percentage>
<offset-rotate> =
[ auto | reverse ] ||
<angle>
<offset-anchor> =
auto |
<position>
<position> =
<position-one> |
<position-two> |
<position-four>
<offset-path> =
<ray()> |
<url> |
<basic-shape>
<coord-box> =
<paint-box> |
view-box
<length-percentage> =
<length> |
<percentage>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<ray()> =
ray( <angle> &&
<ray-size>? &&
contain? &&
[ at <position> ]? )
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<ray-size> =
closest-side |
closest-corner |
farthest-side |
farthest-corner |
sides
<visual-box> =
content-box |
padding-box |
border-box
Exemples
HTML
html
<div id="offsetElement"></div>
CSS
css
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
#offsetElement {
width: 50px;
height: 50px;
background-color: blue;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 3s linear infinite;
}
Résultat
Spécifications
| Specification |
|---|
| Motion Path Module Level 1 # offset-shorthand |
Compatibilité des navigateurs
Chargement…