Propiedad offset de CSS

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 inicial	auto none 0 auto auto
Se aplica a	Elementos transformables.
Heredable	No.
Animable	Sí.
Versión	Motion Path Module Level 1
Sintaxis DOM	Object.style.offset = "auto";

Sintaxis

Propiedad offset de CSS

css

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

Ejemplo de la propiedad offset:

Propiedad offset de CSS

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
offset-position	Especifica la posición inicial de la ruta de desplazamiento.
offset-path	Especifica una ruta de movimiento para que un elemento la siga.
offset-distance	Especifica la posición a lo largo de offset-path.
offset-anchor	Define un punto de anclaje del cuadro a lo largo de la ruta de desplazamiento.
offset-rotate	Especifica la orientación de un elemento.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

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

Se utilizan para definir las propiedades shape-outside y clip-path.Definen el color del texto en CSS.Se utilizan para el dimensionamiento específico de elementos.Permiten posicionar un objeto fuera del flujo normal.Se utilizan para aplicar efectos especiales a un objeto.

Propiedad offset de CSS ​

Sintaxis ​

Ejemplo de la propiedad offset: ​

Valores ​

Práctica ​

Propiedad offset de CSS

Sintaxis

Ejemplo de la propiedad offset:

Valores

Práctica