CSS траектория движения

Модуль CSS траектория движения позволяет авторам анимировать любые графические объекты по произвольной траектории.

Идея в том, что когда вы хотите анимировать перемещение элемента по траектории, ранее у вас были только анимации смещения, позиции и т. д., что не было идеально и позволяло только простые движения. С помощью offset-path вы можете определить конкретную траекторию любой формы. Затем вы анимируете его по этой траектории, анимируя offset-distance, и можете выбрать вращение в любой момент с помощью offset-rotate.

Базовый пример

<div id="motion-demo"></div>

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Справочная информация

Свойства

Функции

ray()

Спецификации

Спецификация
Модуль траектории движения уровень 1 # offset-path-property

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`CSS_motion_path`	5546	7979	72	4532	15.4	5546	79	4332	15.4	6.0 `path()` — единственный поддерживаемый тип значения. 5.0	5546
`basic_shape`	116	116	122	102	18	116	122	78	18	24.0	116
`coord_box`	116	116	122	102	18	116	122	78	18	24.0	116
`path`	64	79	72	51	16	64	79	47	16	9.0	64
`ray`	116	116	122	102	16	116	122	78	16	24.0	116
`url`	116	116	122	102	17	116	122	78	17	24.0	116

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_motion_path