offset-position
Baseline
2024
Newly available
Depuis January 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
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é CSS offset-position définit la position initiale de offset-path.
Syntaxe
/* Valeurs de mots clefs */
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;
/* Valeurs de <pourcentage> */
offset-position: 25% 75%;
/* Valeurs de <longueur> */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;
/* Valeurs d'écart d'un bord */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;
/* Valeurs globales */
offset-position: inherit;
offset-position: initial;
offset-position: unset;
Values
auto-
La position initiale est la position de la boîte spécifiée par la propriété
position. <position>-
Une
<position>. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée commecenter. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultezbackground-position.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Pourcentages | refer to the size of containing block |
| Valeur calculée | pour une valeur de type <length> sa valeur absolue, sinon un pourcentage |
| Type d'animation | une position |
Syntax formelle
offset-position =
normal |
auto |
<position>
<position> =
<position-one> |
<position-two> |
<position-four>
<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}
<length-percentage> =
<length> |
<percentage>
Exemples
Définir la valeur initiale de offset-position
<div id="motion-demo"></div>
#motion-demo {
offset-path: path("M20,20 C20,100 200,0 200,100");
offset-position: left top;
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Spécifications
| Specification |
|---|
| Motion Path Module Level 1 # offset-position-property |
Compatibilité des navigateurs
Chargement…