CSS свойство offset

Свойство offset анимирует элемент по указанной траектории.

Это сокращенная форма записи для следующих свойств:

В ранней спецификации свойство offset называлось "motion".

Это экспериментальное свойство.

Значение по умолчанию	auto none 0 auto auto
Применяется	К трансформируемым элементам.
Наследуется	Нет
Анимируемое	Да
Версия	Motion Path Module Level 1
DOM синтаксис	Object.style.offset = "auto";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
offset-position	Указывает начальное положение траектории смещения.
offset-path	Указывает траекторию движения для элемента.
offset-distance	Указывает положение на траектории (offset-path).
offset-anchor	Указывает опорную точку блока на траектории.
offset-rotate	Указывает ориентацию элемента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.