32 Модуль 7 Графика и эффекты 16 мин урок 7 из 25

Анимация SVG

Линия, которая рисуется сама; галочка, которая появляется штрихом; подчёркивание, растущее из-под курсора. Всё двумя свойствами обводки.

Что ты научишься делать

Поймёшь приём с dasharray и dashoffset — основу всех «рисующихся» линий
Сделаешь анимированную галочку успеха и подчёркивание при наведении
Выберешь между CSS, SMIL и скриптом осознанно

#Фокус, который объясняется за минуту

Эффект рисующейся линии выглядит сложным, а держится на двух свойствах пунктира.

stroke-dasharray задаёт длину штриха и промежутка. Если сделать штрих длиной во весь контур, пунктир превращается в сплошную линию — визуально ничего не меняется.

stroke-dashoffset сдвигает этот пунктир вдоль контура. Сдвинули на всю длину — линия ушла за пределы контура и исчезла. Анимируем сдвиг обратно к нулю — линия «рисуется».

#Откуда взять длину контура

Нужно точное число — длина линии в единицах viewBox. На глаз её не угадать: у кривой длина заметно больше, чем расстояние между концами. Есть три способа получить её честно.

Способ	Как	Когда
Спросить браузер	`path.getTotalLength()` в консоли	Один раз при вёрстке — самый точный
Взять с запасом	Поставить заведомо большее число	Быстро, но старт анимации будет с задержкой
Задать самому	Атрибут `pathLength="100"`	Лучший вариант: длина становится ровно 100

Галочка успеха

<div class="ok">  <svg viewBox="0 0 52 52" width="90" height="90" aria-label="Готово" role="img">    <circle class="ok__ring" cx="26" cy="26" r="23" pathLength="100"/>    <path class="ok__tick" d="M15 27l8 8 15-16" pathLength="100"/>  </svg>  <p>Заказ оформлен</p></div>

svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }.ok__ring {  stroke: #0f8f6a;  stroke-width: 3;  /* pathLength=100 превращает длину в проценты */  stroke-dasharray: 100;  stroke-dashoffset: 100;  animation: draw .5s ease forwards;}.ok__tick {  stroke: #0f8f6a;  stroke-width: 4;  stroke-dasharray: 100;  stroke-dashoffset: 100;  /* Галочка стартует после кольца */  animation: draw .35s ease .45s forwards;}@keyframes draw {  to { stroke-dashoffset: 0; }}/* Уважаем настройку «меньше движения» */@media (prefers-reduced-motion: reduce) {  .ok__ring, .ok__tick { animation: none; stroke-dashoffset: 0; }}.ok { display: grid; gap: 10px; justify-items: center; }.ok p { margin: 0; font-weight: 600; color: #0f8f6a; }

В песочницу

#Подчёркивание, растущее при наведении

Тот же приём, но без SVG вовсе: линию рисует псевдоэлемент, а анимируется transform. Это дешевле для браузера, чем анимация ширины.

Подчёркивание из-под курсора

<nav class="menu">  <a href="#">Главная</a>  <a href="#">Меню</a>  <a href="#">Контакты</a></nav>

.menu a {  position: relative;  color: #16181d;  text-decoration: none;  font-weight: 600;  margin-right: 18px;}.menu a::after {  content: "";  position: absolute;  inset-inline: 0;  inset-block-end: -4px;  block-size: 2px;  background: #6544e0;  /* Сжали к левому краю и ждём */  transform: scaleX(0);  transform-origin: left;  transition: transform .28s cubic-bezier(.22, 1, .36, 1);}.menu a:hover::after,.menu a:focus-visible::after {  transform: scaleX(1);}@media (prefers-reduced-motion: reduce) {  .menu a::after { transition: none; }}

В песочницу

#Движение по траектории

Второй приём, который выглядит дорого, а стоит трёх строк: элемент едет вдоль произвольной кривой. Раньше это считали скриптом покадрово, теперь есть offset-path.

Путь задаётся той же строкой, что и в атрибуте d, а offset-distance говорит, насколько далеко по нему уехал элемент. Анимируется как раз расстояние.

CSSplane.css

1.plane {2  offset-path: path("M0 60 C 60 0, 140 120, 220 20");3  offset-distance: 0%;4  /* Разворачивает элемент по касательной к пути */5  offset-rotate: auto;6  animation: fly 3s ease-in-out infinite alternate;7}89@keyframes fly {10  to { offset-distance: 100%; }11}

#CSS, SMIL или скрипт

У SVG есть собственный язык анимации — <animate>, он же SMIL. Плюс работают обычные CSS-анимации и, конечно, JavaScript. Выбор не про вкус.

	CSS	SMIL	JavaScript
Что умеет	Всё, что можно задать свойством: обводку, transform, opacity, цвет	Ещё и форму пути, движение по траектории	Всё, включая реакцию на данные
Управление из кода	Через классы и переменные	Неудобное	Полное
Уважает reduced-motion	Да, через медиазапрос	Нет — надо отключать вручную	Надо проверять самому
Когда брать	В девяти случаях из десяти	Морфинг формы, движение по пути	Когда анимация зависит от данных или ввода

#Как это выглядит в реальном проекте

Индикатор загрузки для кнопки. Ни одного изображения, ни одной библиотеки, семнадцать строк.

CSSspinner.css

1@layer components {2  .spinner {3    inline-size: 1.25em;4    block-size: 1.25em;5    fill: none;6    stroke: currentColor;7    stroke-width: 3;8    stroke-linecap: round;9  }1011  .spinner circle {12    /* Дуга в четверть окружности, которая едет по кругу */13    stroke-dasharray: 25 75;14    transform-origin: center;15    animation: spin 1s linear infinite;16  }1718  @keyframes spin {19    to { transform: rotate(360deg); }20  }2122  /* Без движения — просто статичное кольцо, а не пустота */23  @media (prefers-reduced-motion: reduce) {24    .spinner circle {25      animation: none;26      stroke-dasharray: none;27      opacity: .45;28    }29  }30}

#Анимация по скроллу

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

Есть и чисто декларативный путь — animation-timeline: view(), привязка анимации к прокрутке без единой строки JavaScript. Он работает в браузерах на движке Chromium, но в остальных пока нет, поэтому его дают сверх рабочего варианта, а не вместо.

CSSПрогрессивное улучшение

1/* База: класс добавляет скрипт, работает везде */2.line.is-visible { animation: draw .8s ease forwards; }34/* Улучшение там, где поддерживается */5@supports (animation-timeline: view()) {6  .line {7    animation: draw linear both;8    animation-timeline: view();9    animation-range: entry 20% cover 60%;10  }11}

#Когда НЕ надо

Анимировать d без крайней нужды. Морфинг формы — самая дорогая анимация из возможных: браузер пересчитывает геометрию на каждом кадре. Для двух-трёх состояний дешевле поменять весь SVG.
Бесконечная анимация вне экрана. Спиннер, который крутится в скрытом блоке, продолжает есть кадры. Останавливай через IntersectionObserver или убирай элемент.
Анимация ради заполнения паузы. Если загрузка занимает 200 мс, спиннер успеет только мигнуть — это раздражает сильнее, чем ожидание. Показывай индикатор с задержкой в 300–400 мс.
Забыть про prefers-reduced-motion. Для части людей движение на экране вызывает физическое недомогание. Это не настройка вкуса.

#Поддержка браузерами

Возможность	Состояние
Анимация `stroke-dashoffset` через CSS	Везде и давно
`pathLength`	Во всех современных браузерах
SMIL (`<animate>`)	Работает везде, но развивается слабо
`animation-timeline: view()`	Пока только в браузерах на Chromium — давать сверх рабочего варианта
`offset-path` (движение по траектории)	Во всех современных браузерах

Где спотыкаются почти все

Длина контура подобрана на глаз

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

Как надо Ставь pathLength="100" и работай в процентах.

Анимируется fill или ширина вместо transform

Почему Такие свойства заставляют браузер пересчитывать раскладку на каждом кадре. На слабом устройстве анимация начинает дёргаться.

Как надо По возможности анимируй transform и opacity. Обводка — исключение: она дешёвая.

Забыт transform-origin у вращения в SVG

Почему По умолчанию точка отсчёта — левый верхний угол системы координат, и фигура улетает по дуге вместо вращения на месте.

Как надо Пиши transform-origin: center и transform-box: fill-box.

Нет ветки prefers-reduced-motion

Почему Человеку с вестибулярными нарушениями движущаяся графика может испортить самочувствие.

Как надо Добавь медиазапрос: анимацию отключи, а конечное состояние оставь видимым.

Пунктир обводки stroke-dasharray: Длины штриха и промежутка. Штрих во всю длину контура выглядит сплошной линией.
Сдвиг пунктира stroke-dashoffset: Смещение пунктира вдоль контура. Анимация этого свойства даёт эффект рисования.
Заданная длина pathLength: Атрибут, переопределяющий длину контура для расчётов обводки.
SMIL SMIL: Собственный язык анимации SVG через тег animate.

Задание

Оживить галочку

Галочка нарисована, но появляется сразу. Сделай так, чтобы контур рисовался: задай обоим элементам pathLength="100", спрячь их через stroke-dasharray и stroke-dashoffset, опиши @keyframes и запусти анимацию — галочку с задержкой после кольца.

Обязательно добавь ветку prefers-reduced-motion: без движения галочка должна быть просто видна.

<svg viewBox="0 0 52 52" width="90" height="90" role="img" aria-label="Готово">  <circle class="ring" cx="26" cy="26" r="23"/>  <path class="tick" d="M15 27l8 8 15-16"/></svg>

svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }.ring { stroke: #0f8f6a; stroke-width: 3; }.tick { stroke: #0f8f6a; stroke-width: 4; }/* Здесь не хватает анимации */

Открыть в песочнице

Подсказка 1

Атрибут пишется прямо в разметке: <circle class="ring" ... pathLength="100"/>

Подсказка 2

Прячем линию: .ring { stroke-dasharray: 100; stroke-dashoffset: 100; }

Подсказка 3

Кадры и запуск: @keyframes draw { to { stroke-dashoffset: 0; } } и animation: draw .5s ease forwards;

Подсказка 4

Задержка — третье значение в сокращении: animation: draw .35s ease .45s forwards;

Показать решение

HTMLindex.html

1<svg viewBox="0 0 52 52" width="90" height="90" role="img" aria-label="Готово">2  <circle class="ring" cx="26" cy="26" r="23" pathLength="100"/>3  <path class="tick" d="M15 27l8 8 15-16" pathLength="100"/>4</svg>

CSSstyle.css

1svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }23.ring {4  stroke: #0f8f6a;5  stroke-width: 3;6  stroke-dasharray: 100;7  stroke-dashoffset: 100;8  animation: draw .5s ease forwards;9}1011.tick {12  stroke: #0f8f6a;13  stroke-width: 4;14  stroke-dasharray: 100;15  stroke-dashoffset: 100;16  animation: draw .35s ease .45s forwards;17}1819@keyframes draw {20  to { stroke-dashoffset: 0; }21}2223@media (prefers-reduced-motion: reduce) {24  .ring, .tick {25    animation: none;26    stroke-dashoffset: 0;27  }28}

Проверь себя

Понимаю связку dasharray и dashoffset
Ставлю pathLength="100" вместо подбора чисел
Знаю, когда нужен SMIL, а когда хватает CSS
Добавляю ветку prefers-reduced-motion к каждой анимации
Не оставляю бесконечные анимации за пределами экрана

Анимация SVG

Что ты научишься делать

#Фокус, который объясняется за минуту

#Откуда взять длину контура

#Подчёркивание, растущее при наведении

#Движение по траектории

#CSS, SMIL или скрипт

#Как это выглядит в реальном проекте

#Анимация по скроллу

#Когда НЕ надо

#Поддержка браузерами

Где спотыкаются почти все

Длина контура подобрана на глаз

Анимируется fill или ширина вместо transform

Забыт transform-origin у вращения в SVG

Нет ветки prefers-reduced-motion

Проверь себя

Оживить галочку

Проверь себя

Горячие клавиши

В редакторе кода

#Фокус, который объясняется за минуту

#Откуда взять длину контура

#Подчёркивание, растущее при наведении

#Движение по траектории

#CSS, SMIL или скрипт

#Как это выглядит в реальном проекте

#Анимация по скроллу

#Когда НЕ надо

#Поддержка браузерами

Где спотыкаются почти все

Длина контура подобрана на глаз

Анимируется fill или ширина вместо transform

Забыт transform-origin у вращения в SVG

Нет ветки prefers-reduced-motion

Проверь себя

Проверь себя

Рядом по теме