Вообще-то, анимация на сайте — это хорошо. Даже в 2002 году на сайте башкирской федерации настольного тенниса уже была анимированная бегущая строка — смотрите сами:

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

Но иногда анимация делает только хуже. Смотрите, когда это происходит.

Дисклеймер: ради этой статьи нам пришлось отключить адблок. Не повторяйте этого дома.

С анимациями сайт медленно грузится

Ну логично же, да?

Первое, что приходит на ум — анимации по-настоящему тяжёлые. Например, какой-нибудь видеофон — это просто много-много склеенных друг с другом фотографий. Такое не может весить мало (вспомните свой айфончик, в котором постоянно кончается место из-за снятых сториз). С CSS-анимациями или SVG-анимациями всё получше, но тем не менее — если для загрузки одной небольшой анимашки вам нужна целая огромная библиотека, подумайте дважды.

❌ Плохой пример: использование анимированных прелоадеров или экранов загрузки с тяжёлыми анимациями. Или если весь ваш сайт — сплошная анимация. Лучше так не делать, кроме случаев, когда вы какое-нибудь креативное агентство, а ваш сайт номинируется на iF Design Awards. Лучше…

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

Анимация мешает смотреть и читать

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

❌ Плохо: на сайте есть анимация всплывающих окон, рекламных баннеров или фоновых видео, которые привлекают внимание пользователя, отвлекая его от основного контента сайта.

✔️ Хорошо: умеренная анимация отдельных важных элементов, например, кнопок call-to-action (CTA), которые привлекают внимание, но не отвлекают пользователя от основного контента.

Анимация всё усложняет

Если всё просто без причины трясётся, мельтешит и переезжает с одного места на другое, то и пользователю ничего не мешает уйти с сайта просто так. Крестик на вкладке-то не двигается :)

❌ Плохо: анимация кнопок, меню или других интерактивных элементов, которая мешает понять, что происходит на экране или какой элемент активен в данный момент.

✔️ Хорошо: использование плавных анимаций для интерактивных элементов, таких как кнопки или меню, которые делают интерфейс проще и понятнее.

Излишняя анимация

❌ Плохо: использование слишком много анимаций, не связанных с тем, что написано на странице. Это может привести к перегрузке визуальной информации и усложнить восприятие контента. Вот смотрите:

✔️ Хорошо: использование анимации только там, где это улучшает UX и помогает пользователю. Например, плавные переходы между разделами сайта или акцентирование ключевых элементов.

Анимация вызывает дискомфорт

❌ Плохо: анимация с быстрыми или резкими движениями, которые могут вызывать у пользователей головокружение, укачивание или дискомфорт. Помните, была история про серию «Покемонов», которую запретили из-за риска эпилепсии? Мы не будем её показывать, но поверьте на слово.

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

Чтобы не делать такие анимации, соблюдайте правила:

✔️ Хорошо:

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

Анимация мешает доступности сайта

Доступность — это важно. Сайты (да и любые цифровые сервисы) должны быть доступны всем пользователям, и мы можем этому или помочь, или помешать с неподходящими анимациями.

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

Допустим, на сайте есть важная кнопка call-to-action (CTA), которая анимирована для привлечения внимания пользователей. Если у неё нет описания или контрастного цвета, некоторым пользователям (например, с нарушениями зрения) будет тяжеловато понять, что там вообще происходит. Поэтому нужны альтернативы:

  1. Использование контрастных цветов для обозначения важных элементов, чтобы пользователи с нарушениями зрения могли легко их различать.
  2. Добавление текстовых описаний или подписей к анимированным элементам, чтобы читалки экрана могли корректно их обработать и передать информацию пользователям с нарушениями зрения.
  3. Обеспечение возможности отключения анимаций или предоставление альтернативного способа представления информации для пользователей, которым анимация может вызывать дискомфорт или проблемы с восприятием.

✔️ Хорошо: использование анимации для обозначения важных элементов с альтернативными способами их восприятия для пользователей с ограниченными возможностями, например, сопровождение анимации аудио- или текстовым описанием.


Да что там говорить. Знайте меру — в том числе и в анимациях — и тогда всё будет хорошо.

🐈

Материалы по теме


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

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

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

10 свойств в CSS о которых вы, вероятно, не знали

10 свойств в CSS о которых вы, вероятно, не знали

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

Читать дальше
CSS
  • 22 июня 2025
Округление в CSS с функцией round()

Округление в CSS с функцией round()

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

Читать дальше
CSS
  • 22 июня 2025
focus-visible

focus-visible

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

Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.

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

Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

Читать дальше
CSS
  • 21 июня 2025
CSS font-palette: управление цветами шрифтов

CSS font-palette: управление цветами шрифтов

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

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

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

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

Читать дальше
CSS
  • 18 июня 2025
Как анимировать CSS Grids без JavaScript

Как анимировать 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 от лучших к худшим

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

Как размыть фон под элементом с помощью 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: что это, зачем нужно и как начать пользоваться

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

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

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

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

Читать дальше
CSS
  • 27 апреля 2025
Анимация по любой траектории с offset-path

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

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

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

Читать дальше
CSS
  • 18 апреля 2025