Propiedad CSS offset-position

La propiedad CSS offset-position define el punto de partida del trazado de desplazamiento de un elemento — la posición donde el elemento se encuentra antes de ser movido a lo largo del trazado por offset-distance.

Las propiedades de motion path permiten animar un elemento a lo largo de una ruta personalizada (una línea, una curva, un rayo) sin usar @keyframes en top/left. El trazado en sí se establece con offset-path; offset-position responde a la pregunta "¿dónde comienza ese trazado?" cuando el trazado no define por sí mismo su propio origen.

Cuándo necesitarla

offset-position solo importa para trazados cuyo punto de partida no está fijado por los propios datos del trazado:

Se aplica cuando offset-path es un ray() o un path() simple que depende de un origen implícito.
Se ignora cuando offset-path es un geometry-box (como border-box) o una <basic-shape> (como circle()), ya que estos definen su propio punto de referencia.
También se ignora cuando la position del elemento es static, ya que el elemento no es extraído del flujo normal.

Un valor típico como offset-position: 50% 50% inicia el trazado de movimiento en el centro del bloque contenedor; auto lo inicia en la posición propia del cuadro del elemento tal como fue dispuesto.

Advertencia

Esta sigue siendo una característica experimental de motion path. La compatibilidad con navegadores es incompleta (Chromium la incluye; Firefox y Safari van a la zaga), así que verifica el soporte actual y proporciona un mecanismo de reserva antes de usarla en producción.

Valor inicial	auto
Se aplica a	Elementos transformables.
Heredada	No.
Animatable	Sí.
Versión	Motion Path Module Level 1
Sintaxis DOM	Object.style.offsetPosition = "auto";

Sintaxis

Sintaxis CSS de offset-position

offset-position: auto | <position> | initial | inherit;

Donde <position> acepta de uno a cuatro valores, exactamente igual que background-position: un solo valor establece la posición horizontal (la vertical toma el valor predeterminado center), dos valores establecen la horizontal y luego la vertical, y se pueden combinar pares de palabras clave y longitudes.

Ejemplo de la propiedad offset-position

El elemento a continuación inicia su trazado de movimiento en 100px 100px dentro de su contenedor y sigue un ray(45deg):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Valores

Valor	Descripción
auto	Indica que la posición inicial es la posición del cuadro especificada con la propiedad position.
`<position>`	Especifica la posición inicial, usando el bloque contenedor como área de posicionamiento y un punto sin dimensiones (cuadro de tamaño cero) como área del objeto. Este valor puede especificarse con uno a cuatro valores. Si se define un valor, el segundo se asume como center. Si se especifican dos valores que no son palabras clave, el primero representa la posición horizontal y el segundo la posición vertical. Si se especifican tres o cuatro valores, los valores de longitud-porcentaje son desplazamientos respecto a las palabras clave precedentes (lee la propiedad background-position para más información).
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas de motion path

offset-position es una pieza del módulo CSS Motion Path. Normalmente se combina con:

offset-path — la ruta a lo largo de la cual viaja el elemento.
offset-distance — qué tan lejos a lo largo de esa ruta se encuentra el elemento actualmente (anima esto para crear movimiento).
offset-anchor — qué punto del elemento se coloca sobre el trazado.
offset-rotate — si el elemento rota y cómo lo hace al seguir el trazado.

Práctica

¿Cuáles son los diferentes tipos de propiedades CSS offset?