CSS свойство offset

Определение и использование

offset Свойство используется для анимации элементов по пути и является сокращенной формой следующих свойств:

Об установке offset Разные способы установки значений свойств, пожалуйста, смотрите больше примеров ниже.

Использование offset Краткая форма свойств offset-path, offset-distance и offset-rotate для элемента <img>:

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

Использование элемента <img> для offset Установка значений свойств offset-path и offset-rotate:

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

Использование элемента <img> для offset Установка значений свойств offset-path и offset-distance:

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

Использование элемента <img> для offset Значения свойств offset-path, offset-distance, offset-rotate и offset-anchor для установки свойств:

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

offset: auto|value|initial|inherit;

Значение	Описание
auto	По умолчанию. См. значение по умолчанию для каждого отдельного свойства 'offset-'
offset-anchor	Указывает фиксированную точку на элементе, расположенную на анимационном пути. Значением по умолчанию является auto.
offset-distance	Указывает расстояние от начала пути, определенного offset-path. Значением по умолчанию является 0.
offset-path	Указывает путь анимации элемента. Значением по умолчанию является none.
offset-position	Указывает начальное положение элемента по пути. Значением по умолчанию является normal.
offset-rotate	Указывает угол поворота элемента при анимации по пути. Значением по умолчанию является auto.
initial	Sets this property to its default value. См. initial.
inherit	Инherits this property from its parent element. См. inherit.

Значение по умолчанию:	См. значение по умолчанию для отдельных свойств
Инheritability:	Нет
Создание анимации:	Поддерживается. См. также:Свойства анимации.
Версия:	CSS3
Синтаксис JavaScript:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"