Анимация по любой траектории с offset-path

18 апреля 2025

У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.

В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.

Как это использовать?

Один из способов сделать такое чудо (а еще анимацию по любой траектории) — свойство offset-path, для анимации движения элементов вообще без использования JavaScript.

Например, вы хотите, чтобы элемент перемещался по кругу, зигзагом или даже по спирали. Раньше для таких задач приходилось использовать JavaScript или сложные расчёты. Допустим, двигаем квадратик:

<div class="box"></div>

Вот его стили:

.box {
  position: absolute; /* Необходимо для движения по координатам */
  width: 50px;
  height: 50px;
  background-color: tomato;
}

И вот таким длинным JavaScript-кодом пришлось бы двигать квадратик по сложной траектории:

// Функция для движения по SVG-пути
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M 0 0 C 100 100 200 0 300 100');

// Получаем элемент
const box = document.querySelector('.box');

// Длительность анимации в миллисекундах
const duration = 3000;
let startTime;

// Функция анимации
function animate(timestamp) {
  if (!startTime) startTime = timestamp;

  // Вычисляем прошедшее время
  const progress = (timestamp - startTime) / duration;

  // Останавливаем анимацию после окончания
  if (progress > 1) {
	startTime = timestamp;
  }

  // Получаем координаты точки на пути (значение от 0 до 1)
  const point = path.getPointAtLength(path.getTotalLength() * progress);

  // Перемещаем элемент в полученные координаты
  box.style.transform = `translate(${point.x}px, ${point.y}px)`;

  // Зацикливаем анимацию
  requestAnimationFrame(animate);
}

// Запускаем анимацию
requestAnimationFrame(animate);

Теперь можно обойтись только CSS с помощью Offset-path.

Как работает offset-path?

Свойство offset-path принимает несколько значений:

path() — позволяет создать собственный путь движения.
circle() — задаёт движение по окружности;
ray() — создаёт движение по прямой линии, заданной углом и длиной;
none — выключает перемещение по траектории.

Пример использования

Создадим элемент, который движется по кривой траектории:

<div class="box"></div>

.box {
  width: 50px;
  height: 50px;
  background-color: tomato;
  offset-path: path('M 0 0 C 100 100 200 0 300 100');
  animation: move 3s linear infinite;
}

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

В этом примере мы создали путь с помощью SVG, запустили анимацию, используя свойство offset-distance, чтобы указать, какое расстояние проходит элемент по заданному пути.

Что ещё полезно знать? Есть несколько дополнительных полезных свойств, которые идут вместе с offset-path:

offset-distance управляет позицией элемента на заданном пути в процентах или других единицах длины.

.element {
  offset-distance: 50%; /* Позиция на середине пути */
  offset-distance: 100px; /* Смещение на 100 пикселей по пути от начала */
}

offset-rotate задаёт поворот элемента во время движения (например, auto, чтобы элемент автоматически поворачивался вдоль пути).

Разные варианты траекторий

Оставляем вам разные варианты траекторий, которые могут пригодиться в реальных проектах.

Глаз

.element {
  offset-path: path('M50,150 Q150,10 250,150 Q150,290 50,150 Z ');
}

Волна

.element {
  offset-path: path('M0,50 Q50,0 100,50 T200,50 T300,50');
}

Знак бесконечности

.element {
  offset-path: path('M150,150 C120,100 60,100 50,150 C40,200 110,200 150,150 C190,100 260,100 250,150 C240,200 180,200 150,150');
}

Треугольник

.element {
  offset-path: path('M150,20 L280,260 L20,260 Z');
}

Звезда

.element {
  offset-path: path('M150,20 L179,111 L270,111 L197,165 L223,255 L150,200 L77,255 L103,165 L30,111 L121,111 Z');
}

Сердечко

.element {
  offset-path: path('M150,100 A40,40 0 0,1 230,100 Q230,160 150,240 Q70,160 70,100 A40,40 0 0,1 150,100 Z');
}

Прямоугольник со скругленными углами

.element {
  offset-path: path('M50,50 H250 A20,20 0 0,1 270,70 V230 A20,20 0 0,1 250,250 H50 A20,20 0 0,1 30,230 V70 A20,20 0 0,1 50,50 Z');
}

Капля

.element {
  offset-path: path('M150,40 Q220,40 220,120 Q220,180 150,260 Q80,180 80,120 Q80,40 150,40 Z');
}

Облачко

.element {
  offset-path: path('M60,170 Q40,100 90,100 Q110,60 150,80 Q190,50 220,90 Q260,90 250,140 Q280,160 250,190 Q220,240 160,220 Q110,250 90,200 Q40,210 60,170 Z');
}

Поддержка в браузерах

Свойство offset-path хорошо поддерживается во всех современных браузерах. Тем не менее, рекомендуется проверять поддержку для каждого конкретного случая.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

Лигатуры в CSS: как сделать текст аккуратнее

Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

CSS, Это база

9 августа 2025

CSS-селекторы. Шпаргалка для новичков

Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.

CSS

8 августа 2025

CSS-градиенты в oklch

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

CSS

8 августа 2025

CSS :has() — проверка наличия потомков или соседних элементов

Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.

CSS

6 августа 2025

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

CSS

5 августа 2025

Всё самое важное о псевдоклассе :default

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

CSS

4 августа 2025

Как работает единица измерения em в CSS

Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

CSS

30 июля 2025

Как найти пустые элементы в CSS

Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.

CSS

29 июля 2025

Как работает ::first-line — оформление первой строки текста в CSS

Псевдоэлемент ::first-line позволяет задать особое оформление только для первой строки текста внутри элемента. Это полезно, когда нужно визуально выделить начало абзаца — например, сделать первую строку жирной, изменить цвет или стиль шрифта. Такой приём часто используют в типографике и веб-дизайне, чтобы направить внимание читателя.

Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29

Как использовать: first-line

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Псевдоэлемент добавляется к селектору через ::, и внутри блока задаются стили, которые применятся только к первой строке, как она отображается в браузере:

p::first-line {
  font-weight: bold;
  color: red;
}

Этот стиль сделает только первую строку текста в каждом абзаце <p> красной и жирной. Важно: то, где заканчивается строка, зависит от ширины контейнера и размера шрифта, а не от переносов в HTML.

Какие свойства работают

Псевдоэлемент ::first-line не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:

Поддерживаются:

color
font и его производные (font-size, font-weight, font-style, font-variant)
letter-spacing, word-spacing
line-height
text-decoration
text-transform
vertical-align
background
margin-left и margin-right
padding-left и padding-right
border-left и border-right

Не поддерживаются:

display, position, transform, width, height и другие «структурные» свойства.

Это сделано, чтобы не нарушать верстку и избежать проблем с потоком документа.

Пример с цитатой

<blockquote>
  Когда вы начнёте, главное — не останавливаться.
</blockquote>

blockquote::first-line {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.

Советы по использованию

Используйте ::first-line для декоративных акцентов: начало статьи, цитаты, описание карточки.
Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
Не используйте псевдоэлемент для логических операций — он только визуальный.
Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.

Поддержка

Псевдоэлемент ::first-line поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block, inline-block, inline).

Заключение

::first-line — это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

CSS

27 июля 2025

CSS-счётчики: как работает свойство counter-set

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент. Оно похоже на counter-reset, но отличается тем, что не сбрасывает счётчик, а просто присваивает ему конкретное значение. Это даёт больше контроля над нумерацией, особенно когда нужно продолжить счёт или задать его вручную в разных частях документа.

CSS-счётчики — это способ автоматически нумеровать элементы, например заголовки, пункты списка, шаги в инструкции. Их можно комбинировать с псевдоэлементами и свойством content, чтобы вставлять числа прямо в текст.

CSS

25 июля 2025

Анимация по любой траектории с offset-path

Как это использовать?

Как работает offset-path?

Пример использования

Разные варианты траекторий

Глаз

Волна

Знак бесконечности

Треугольник

Звезда

Сердечко

Прямоугольник со скругленными углами

Капля

Облачко

Поддержка в браузерах

Читать дальше

Как использовать: first-line

Какие свойства работают

Пример с цитатой

Советы по использованию

Поддержка

Заключение

Вход

Регистрация

Восстановление доступа

Запишитесь на консультацию