Анимация по любой траектории с 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 хорошо поддерживается во всех современных браузерах. Тем не менее, рекомендуется проверять поддержку для каждого конкретного случая.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Псевдоклассы валидации форм: делаем интерфейсы понятнее
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
- 15 августа 2025
Как сделать первую букву абзаца большой — буквица через ::first-letter
Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.
Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.
- 12 августа 2025
Лигатуры в CSS: как сделать текст аккуратнее
Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали,
что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки
не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости
и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.
Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.
Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.
CSS-селекторы. Шпаргалка для новичков
Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.
- 8 августа 2025
CSS-градиенты в oklch
Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций
linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок,
рамок, декоративных элементов и даже в интерактивных эффектах при наведении.
Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.
Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch.
Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.
- 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов
Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним.
Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент.
В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.
- 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения
Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать
направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже
рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть.
Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому»
и какие фолбэки использовать уже сейчас.
- 5 августа 2025
Всё самое важное о псевдоклассе :default
Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025
Как работает единица измерения em в CSS
Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
- 30 июля 2025
Как найти пустые элементы в CSS
Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
- 29 июля 2025