Анимация по любой траектории с 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 font-palette: управление цветами шрифтов

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

CSS

18 июня 2025

Как анимировать CSS Grids без JavaScript

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.

Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

CSS

1 июня 2025

Все единицы измерения в CSS от лучших к худшим

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

Абсолютные:

px — пиксели
cm — сантиметры
mm — миллиметры
in — дюймы
pt — типографские пункты
pc — пика

Относительные:

z% — процент от родителя
em — от размера шрифта родителя
rem — от размера шрифта корня
vw — 1% от ширины вьюпорта
vh — 1% от высоты вьюпорта
vmin / vmax — минимальное/максимальное из vw и vh
fr — доля пространства в грид-сетке
ch — ширина символа «0»
ex — высота строчной буквы «x»

Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.

CSS

30 мая 2025

Как размыть фон под элементом с помощью backrop-filter

В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.

То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter.

Пример минимального кода:

<div class="glass-panel">Контент</div>

.glass-panel {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
}

Чтобы это работало, у элемента должен быть фон с прозрачностью (например, rgba или hsla), иначе фильтр не виден. И да, backdrop-filter визуально различим только если элемент реально перекрывает что-то.

CSS

5 мая 2025

$Справочник по новым математическим функциям CSS$

Справочник по новым математическим функциям CSS

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.

Статья дополняется.

CSS

28 апреля 2025

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться

Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.

Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.

Внимание! Все примеры в этой статье работают только в Chrome 116+.

CSS

27 апреля 2025

Автоматическая тёмная тема: новая CSS-функция light-dark()

CSS-функция light-dark() облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark) и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.

С light-dark() всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white) — в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media. Просто одно свойство и два значения — читаемо, логично, компактно.

CSS

23 апреля 2024

Псевдокласс :link

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

Пример использования псевдокласса :link для стилизации непосещенных ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

В данном примере для всех непосещенных ссылок устанавливается синий цвет (#007bff) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных (:visited) ссылок.

При работе с :link, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover и :active, чтобы обеспечить интерактивный и отзывчивый интерфейс.

Пример полного набора стилей для ссылок:

a:link {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #666;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #ff0000;
}

В этом примере задаются различные стили для всех возможных состояний ссылок: :link для непосещённых, :visited для посещённых, :hover при наведении курсора и :active в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.

CSS

4 апреля 2024

Селектор потомков (пробел)

Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.

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

article p {
  color: #333;
  line-height: 1.6;
}

В данном примере все абзацы (<p>), которые находятся внутри элемента <article>, будут окрашены в темно-серый цвет и получат межстрочный интервал в полтора размера шрифта. Селектор потомков позволяет легко управлять стилем конкретных элементов, сохраняя при этом общую структуру и читаемость кода.

Селектор потомков особенно полезен в следующих случаях:

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

Применение селектора потомков упрощает создание модульной и легко поддерживаемой структуры стилей, позволяя разработчикам более точно и гибко управлять внешним видом веб-страницы.

Однако, важно соблюдать баланс и избегать слишком глубокой вложенности селекторов, так как это может усложнить поддержку и оптимизацию кода. Рекомендуется использовать селектор потомков с умом, ориентируясь на поддержание чистоты и простоты структуры CSS.

CSS

4 апреля 2024

Псевдокласс :focus

Псевдокласс :focus в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.

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

input:focus {
  border: 2px solid blue;
  background-color: lightblue;
}

В этом примере для всех текстовых полей (input) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.

Псевдокласс :focus особенно важен для:

Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.

Применение :focus в сочетании с другими псевдоклассами, такими как :hover и :active, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.

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

CSS

4 апреля 2024

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

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

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

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

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

Глаз

Волна

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

Треугольник

Звезда

Сердечко

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

Капля

Облачко

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

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

Вход

Регистрация

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

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