CSS Motion Path и SVG: практическое руководство

CSS Motion Path и SVG

CSS Motion Path позволяет двигать элемент по заданной форме. Для SVG это особенно полезно: кривая, маршрут или линия из дизайна может стать траекторией анимации в браузере.

Коротко

offset-path задает маршрут.
offset-distance управляет прогрессом по маршруту.
Данные SVG path можно использовать в CSS path().
В адаптивной верстке нужно проверять совпадение траектории и графики.
prefers-reduced-motion обязателен для хорошего UX.

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

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

Значение path() использует синтаксис SVG. Поэтому Motion Path хорошо подходит для иконок, карт, продуктовых иллюстраций, маршрутов и визуализаций данных.

Где применять

Используйте его для продуктовых туров, маркеров на графиках, маршрутов доставки, иконок на кривой и визуального прогресса. Сначала извлеките путь через SVG Path Extractor, проверьте файл в SVG Viewer, затем упростите его с помощью SVG Optimizer.

HTML и CSS

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

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

offset-rotate: auto поворачивает элемент по направлению пути. Это удобно для стрелок и объектов движения, но плохо подходит для текста.

Адаптивность и доступность

CSS path() не масштабируется автоматически как SVG viewBox. Держите область анимации предсказуемой, используйте координаты из исходного дизайна и тестируйте мобильный, планшетный и десктопный размеры.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

Движение должно направлять внимание, а не перекрывать контент. Не сообщайте состояние только анимацией и не закрывайте маркером кнопки, текст или поля формы.

Рабочий процесс SVGView

Откройте SVG в SVG Viewer и проверьте viewBox.
Извлеките путь через SVG Path Extractor.
Очистите внешние SVG в SVG Sanitizer.
Отформатируйте разметку в SVG Formatter.
Оптимизируйте в SVG Optimizer и протестируйте снова.

Вывод

CSS Motion Path превращает SVG-пути в аккуратную и поддерживаемую анимацию интерфейса. Начинайте с простой траектории, задавайте анимации ясную задачу и проверяйте доступность до публикации.

CSS Motion Path и SVG: практическое руководство