Atributo offset de CSS

Definición y uso

offset Atributo utilizado para animar elementos a lo largo de una trayectoria, es la forma abreviada de los siguientes atributos:

Con respecto a la configuración offset Las diferentes formas de establecer valores de atributo, consulte más ejemplos a continuación.

Usar offset Atributo abreviado para establecer los valores de offset-path, offset-distance y offset-rotate para el elemento <img>:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Usar el elemento <img> para offset Establecer los valores de atributo offset-path y offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

Usar el elemento <img> para offset Establecer los valores de atributo offset-path y offset-distance:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

Usar el elemento <img> para offset Establezca los valores de los atributos offset-path, offset-distance, offset-rotate y offset-anchor:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

offset: auto|value|initial|inherit;

Valor	Descripción
auto	Predeterminado. Ver los valores predeterminados de cada atributo 'offset-' individual.
offset-anchor	especifica el punto fijo en el elemento que se encuentra en la trayectoria de animación. El valor predeterminado es auto.
offset-distance	especifica la distancia desde el punto de partida de la trayectoria definida por offset-path. El valor predeterminado es 0.
offset-path	especifica la trayectoria del elemento que se anima. El valor predeterminado es none.
offset-position	especifica la posición inicial del elemento a lo largo de la trayectoria. El valor predeterminado es normal.
offset-rotate	ángulo de rotación cuando el elemento se anima a lo largo de una trayectoria. El valor predeterminado es auto.
initial	Establece este atributo en su valor predeterminado. Ver initial.
inherit	Hereda este atributo de su elemento padre. Ver inherit.

Valor predeterminado:	Ver el valor predeterminado para las propiedades individuales
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"