W3docs
es
Iniciar sesión

Propiedad offset de CSS

Use the offset CSS shorthand property for animating an element along the specified path. Read about property values and practice examples.

La propiedad offset anima un elemento a lo largo de la ruta especificada.

Es una propiedad abreviada para las siguientes propiedades:

La propiedad offset se llamaba "motion" en la especificación anterior.

advertencia

Esta propiedad es una tecnología experimental.

Valor inicialauto none 0 auto auto
Se aplica aElementos transformables.
HeredableNo.
AnimableSí.
VersiónMotion Path Module Level 1
Sintaxis DOMObject.style.offset = "auto";

Sintaxis

Propiedad offset de CSS

offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;

Ejemplo de la propiedad offset:

Propiedad offset de CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Offset property example</h2>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripción
offset-positionEspecifica la posición inicial de la ruta de desplazamiento.
offset-pathEspecifica una ruta de movimiento para que un elemento la siga.
offset-distanceEspecifica la posición a lo largo de offset-path.
offset-anchorDefine un punto de anclaje del cuadro a lo largo de la ruta de desplazamiento.
offset-rotateEspecifica la orientación de un elemento.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Cuál es el propósito de las propiedades offset en CSS?