Propriété CSS offset
La propriété offset anime un élément le long du chemin spécifié.
C'est une propriété raccourcie pour les propriétés suivantes:
La propriété offset a été appellée "motion" dans la spécification antérieure.
Cette propriété est une téchnologie expérimentale.
Valeur initiale | auto none 0 auto auto |
Appliquée à | Éléments transformables. |
Héritée | Non. |
Animable | Oui. |
Version | Motion Path Module Level 1 |
Syntaxe DOM | Object.style.offset = "auto"; |
Syntaxe
offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
div {
width: 60px;
height: 60px;
background-color: #8ebf42;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 4s linear infinite;
}
</style>
</head>
<body>
<h2>Exemple de la propriété offset</h2>
<div></div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
offset-position | Spécifie la position initiale du chemin de décalage. |
offset-path | Spécifie un mouvement du chemin pour un élément à suivre. |
offset-distance | Spécifie la position le long de l'offset-path. |
offset-anchor | Définit un point d'ancrage de la boîte le long du chemin de décalage. |
offset-rotate | Spécifie l'orientation de l'élément. |
initial | Fait utiliser la valeur initiale. |
inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
55.0+ | ✕ | ✕ | ✕ | ? |
Pratiquez vos connaissances
Qu'est-ce que les propriétés CSS 'offset-*' sont utilisées pour contrôler?
Correcte!
Incorrecte!