Propriété offset-path CSS

La propriété CSS offset-path permet de spécifier un chemin de déplacement à suivre pour un élément et définit sa position.

La position sur le chemin est déterminée par la offset-distance property.

Dans les versions antérieures de la spécification, le nom de offset-path était « motion-path ». Cependant, il a été renommé en offset-path car la propriété spécifie des positions statiques.

INFO

La propriété offset-path elle-même n'est pas animable ; elle définit uniquement le chemin. L'animation est contrôlée via la propriété offset-distance.

Si vous avez défini offset-path en CSS, vous pouvez utiliser JavaScript pour contrôler l'animation.

Valeur initiale	none
S'applique à	Éléments transformables.
Héritée	Non.
Animable	Non.
Version	Motion Path Module Level 1
Syntaxe DOM	`object.style.offsetPath = "ray()";`

Syntaxe

Syntaxe CSS de offset-path

css

offset-path: none | ray() | path() | url() | <basic-shape>;

Exemple de la propriété offset-path avec les propriétés offset-rotate et animation :

Exemple de code CSS pour offset-path

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 30%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 3s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-path property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

Exemple de la propriété offset-path :

Autre exemple de code CSS pour offset-path

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #666;
      }
      .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
        background-color: #8ebf42;
        offset-distance: -280%;
      }
      #box2 {
        background-color: #1c87c9;
        offset-distance: 190%;
      }
    </style>
    <body>
      <div class="item" id="box1"></div>
      <div class="item" id="box2"></div>
    </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
`none`	Aucun chemin de mouvement n'est spécifié. Il s'agit de la valeur par défaut.
`ray()`	Un segment de ligne qui part de la position de la boîte et se poursuit dans la direction définie par l'angle spécifié.
`url()`	Fait référence à l'ID d'un élément SVG à utiliser comme chemin de déplacement.
`<basic-shape>`	Spécifie une forme qui inclut : `circle()`, `ellipse()`, `inset()`, `polygon()` ou `path()`.

Practice

Que fait la propriété CSS offset-path ?

Elle détermine le chemin qu'un élément suivra pendant une animation ou une transition CSS.Elle ajuste la couleur d'un élément pendant une animation ou une transition CSS.Elle détermine la forme et la position d'un élément sur une page web.Elle peut faire bouger un élément le long d'un chemin défini.

Propriété offset-path CSS ​

Syntaxe ​

Exemple de la propriété offset-path avec les propriétés offset-rotate et animation : ​

Exemple de la propriété offset-path : ​