Propiedad offset-path de CSS

La propiedad CSS offset-path se utiliza para especificar una trayectoria de movimiento que un elemento debe seguir y define la posición del elemento.

La posición en la trayectoria está determinada por la propiedad offset-distance.

En las versiones anteriores de la especificación, el nombre de offset-path era ''motion-path''. Sin embargo, se cambió a offset-path ya que la propiedad especifica posiciones estáticas.

INFO

La propiedad offset-path en sí no es animable; solo define la trayectoria. La animación se controla a través de la propiedad offset-distance.

Si ha definido offset-path en CSS, puede utilizar JavaScript para controlar la animación.

Valor inicial	none
Se aplica a	Elementos transformables.
Heredable	No.
Animable	No.
Versión	Motion Path Module Level 1
Sintaxis DOM	`object.style.offsetPath = "ray()";`

Sintaxis

Sintaxis de CSS offset-path

css

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

Ejemplo de la propiedad offset-path con las propiedades offset-rotate y animation:

Ejemplo de código CSS 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 »

Ejemplo de la propiedad offset-path:

Otro ejemplo de código CSS 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 »

Valores

Valor	Descripción
`none`	No se especifica ninguna trayectoria de movimiento. Este es el valor predeterminado.
`ray()`	Un segmento de línea que comienza desde la posición de la caja y se extiende en la dirección definida por el ángulo especificado.
`url()`	Hace referencia al ID de un elemento SVG que se utilizará como trayectoria de movimiento.
`<basic-shape>`	Especifica una forma que incluye: `circle()`, `ellipse()`, `inset()`, `polygon()` o `path()`.

Práctica

¿Qué hace la propiedad CSS offset-path?

Determina la trayectoria que seguirá un elemento durante una animación o transición CSS.Ajusta el color de un elemento durante una animación o transición CSS.Determina la forma y la posición de un elemento en una página web.Puede hacer que un elemento se mueva a lo largo de una trayectoria definida.

Propiedad offset-path de CSS ​

Sintaxis ​

Ejemplo de la propiedad offset-path con las propiedades offset-rotate y animation: ​

Ejemplo de la propiedad offset-path: ​