Инструкции

Как устроены анимации в CodePen CodePen — это онлайн-редактор, в котором можно экспериментировать с HTML, CSS и JavaScript прямо в браузере. Он особенно удобен для анимаций: вы сразу видите результат, можете поделиться своей работой с коллегами, встроить ее на сайт или в статью. Каждый проект в CodePen называется Pen и состоит из трех панелей: HTML — разметка страницы; CSS — стили и визуальные эффекты; JS — логика и поведение. Даже без JavaScript и сложных библиотек вы можете создавать красивые и живые эффекты, используя лишь CSS. Пример Простой пример работы анимаций в Codepen: при наведении на квадрат он плавно меняет цвет. Такой эффект легко собрать в CodePen буквально за минуту — и сразу посмотреть результат. Посмотреть код анимации Работа с ключевыми кадрами Анимации в CSS строятся вокруг понятия ключевых кадров — это контрольные точки, в которых задаются стили элемента на определенном этапе времени. Чтобы описать такие промежуточные состояния и анимировать переход между ними, в CSS используется специальное правило @keyframes. Оно позволяет задать серию кадров — например, как элемент выглядит в начале (0%) и в конце (100%) анимации, а при необходимости — и на промежуточных этапах (например, 30%, 60%). В обычном CSS мы задаем свойства элементов статично. Например: Такой стиль не меняется. А если мы хотим, чтобы цвет, форма, размер или положение элемента менялись со временем — нам нужна анимация. Вот тут в дело вступают ключевые кадры. Базовый синтаксис Например, элемент может переместиться вниз: Вы также можете использовать проценты — это удобно, если анимация сложная и у нее несколько этапов: Проценты указывают прогресс анимации от 0% (начало) до 100% (конец) и позволяют задать сколько угодно промежуточных состояний. Применение анимации к элементу Чтобы анимация сработала, нужно: Применить к элементу имя ключевых кадров. Указать длительность анимации. При необходимости настроить повторение, направление и прочее. Можно использовать сокращенную запись: Здесь: bounce — имя ключевых кадров; 1s — длительность; ease-in-out — кривая анимации; infinite — бесконечное повторение анимации. Пример Давайте соберем простой пример, где квадрат плавно подпрыгивает вверх и возвращается обратно: Посмотреть код анимации Параметры анимации CSS позволяет тонко управлять поведением анимации. Основные параметры: СвойствоОписаниеanimation-nameНазвание анимации (ссылается на @keyframes)animation-durationДлительностьanimation-timing-functionТип интерполяцииanimation-delayЗадержка перед началомanimation-iteration-countКоличество повторенийanimation-directionНаправлениеanimation-fill-modeПоведение до и послеanimation-play-stateМожно поставить анимацию на паузу Что можно делать с фигурами: базовые трансформации В CSS доступен целый арсенал инструментов, которые позволяют визуально изменять элементы: вращать, масштабировать, перемещать, наклонять и даже управлять прозрачностью. Прозрачность Свойство opacity позволяет делать элемент полупрозрачным или полностью прозрачным. Принимает значение от 0 (полностью прозрачно) до 1 (полностью видимый). Поворот rotate поворачивает элемент относительно своей оси. Принимает положительные значения для поворота по часовой стрелке, отрицательные — против часовой. Масштаб scale изменяет размеры элемента, сохраняя пропорции. Можно масштабировать только по одной оси без сохранения пропорций: scaleX, scaleY. Перемещение Свойство translate позволяет сдвинуть элемент по координатной сетке. Такой сдвиг не влияет на расположение других элементов и не занимает дополнительного пространства. Это визуальное смещение, элемент как бы «перемещается поверх остального». В отличие от margin, который действительно меняет положение элемента в потоке и может сдвигать соседние элементы, translate работает только на уровне отображения, не нарушая структуру документа. Наклон skewX и skewY позволяют создать эффект перекашивания объекта. skewX — наклон по горизонтали; skewY — наклон по вертикали. Интерактивный пример Мы подготовили интерактивный пример, в котором дополнительно использовали JavaScript для сохранения состояния объекта после анимаций, но об этом в следующем разделе. Сейчас можете просто скопировать код в ваш Pen и посмотреть как работают разные трансформации. Посмотреть код анимации Управление анимацией с помощью JavaScript На первых порах CSS-анимаций вполне достаточно: вы описываете ключевые кадры, применяете эффект — и элемент красиво двигается, мигает, исчезает или трансформируется. Но чем больше вы работаете с анимацией, тем чаще сталкиваетесь с ограничениями: вам нужно больше гибкости, больше условий, больше интерактивности. И в какой-то момент появляется необходимость подключить JavaScript. Но зачем вообще управлять анимацией через JS, если CSS и так все умеет? Зачем использовать JavaScript для анимации CSS-анимации прекрасно работают для предсказуемых и автономных эффектов — например, чтобы элемент плавно появлялся на экране при загрузке страницы. Но как только в игру вступает взаимодействие с пользователем или изменяющийся контекст, CSS уже не справляется. Представьте, вы хотите, чтобы: кнопка подпрыгивала при каждом клике; блок анимировался только тогда, когда пользователь прокрутил до него; одна и та же анимация проигрывалась в обратную сторону, если пользователь нажал второй раз. Все это невозможно (или крайне сложно) сделать на чистом CSS. Вот тут и приходит на помощь JavaScript как инструмент управления поведением анимации: когда запускать, как менять, чем управлять. Как JavaScript помогает анимировать На практике есть три способа работать с анимацией в JavaScript. Они различаются по уровню контроля и сложности. Управление CSS-анимацией через стили Это самый простой и часто самый логичный способ: вы заранее пишете CSS-анимацию, а с помощью JS просто включаете или отключаете ее. Вы как бы говорите браузеру: «Вот анимация. Я сам скажу, когда ее запускать». Этот способ отлично работает в 90% случаев. Главное — вся логика анимации остается в CSS, а JS просто ее активирует. Web Animations API (element.animate) Если вы хотите управлять анимацией в коде: проигрывать, останавливать, менять параметры на лету — используйте Web Animations API. Это встроенный в браузер инструмент, который позволяет запускать анимации, подобные CSS keyframes, но через JS. Такой способ особенно удобен, если: анимации создаются динамически, с разными значениями; вы хотите точно управлять временем и событиями (.play(), .pause(), .reverse() и т.д.); вы не хотите писать CSS, а работаете чисто в JS-приложении. Полный контроль с помощью requestAnimationFrame Это уже низкоуровневый подход, в котором вы сами отвечаете за каждый кадр анимации. Он используется, когда нужна настоящая математика: движение по кривым, физика, игра с инерцией или отскоками. Такой способ используется редко — только если вы делаете игру, анимированную визуализацию или нелинейную анимацию, которую нельзя описать keyframes. Какой же из вариантов выбрать? Вот простой способ не запутаться: ЗадачаЧто использоватьПростая анимация, завязанная на CSSCSS + JS (добавление классов)Нужно запускать, останавливать, менять анимацию на летуelement.animate()Сложная логика, физика, кастомные расчетыrequestAnimationFrame()Хотите избежать ручной работыИспользуйте библиотеку (например, GSAP) Интерактивные эффекты Интерактивные эффекты — это анимации, которые зависят от действий пользователя: навел курсор → элемент увеличился; кликнул → кнопка подпрыгнула; прокрутил вниз → заголовок плавно появился; переместил мышку → объект начал двигаться вслед. Одно дело — просто анимировать объект при загрузке страницы. Совсем другое — когда элемент оживает в ответ на действия пользователя. Такие интерактивные анимации делают интерфейс живым, отзывчивым и интуитивно понятным. И именно они задают то самое ощущение мягкости и естественности в современных интерфейсах. Для создания интерактивных эффектов обычно отслеживают пользовательские события. Вот самые распространенные: СобытиеКогда возникаетmouseover / mouseoutпри наведении и уходе курсора (на десктопах)clickпри клике (или тап на мобильных устройствах)mousedown / mouseupпри нажатии и отпускании кнопки мыши или пальцаscrollпри прокрутке страницыmousemoveпри движении мышиfocus / blurпри получении или потере фокусаtouchstart / touchendпри прикосновении к экрану мобильного устройства (тап и отпускание пальца) Пример Мы создали еще один интерактивный пример в виде карточки, с которой можно взаимодействовать разными способами. Вы можете скопировать код в Pen и протестировать интерактивные эффекты самостоятельно. Посмотреть код анимации Интерфейсные анимации Анимации в пользовательском интерфейсе — это не просто визуальные эффекты. Это язык взаимодействия между системой и пользователем. Хорошая анимация объясняет, где вы находитесь, что только что произошло и что произойдет дальше. Она снижает когнитивную нагрузку и делает интерфейс естественным и отзывчивым. Интерфейсные анимации — это, прежде всего, паттерны поведения, которые повторяются в разных интерфейсах: появление элементов, переключение вкладок, подтверждение действий, наведение курсора и многое другое. Далее приведен список с распространенными паттернами анимаций. Анимации появления и исчезновения (Enter/Exit) Когда на экране появляется новый элемент — будь то модальное окно, подсказка или уведомление — важно показать, откуда он пришел. Без этого пользователь может почувствовать, что что-то просто выпрыгнуло из ниоткуда. Анимация помогает объяснить появление, задать направление и сгладить восприятие. То же самое работает и в обратную сторону. Если элемент исчезает слишком резко, это может восприниматься как ошибка или баг. Наведение курсора (Hover) Это один из самых часто используемых видов микровзаимодействия. Он говорит пользователю: «Да, на этот элемент можно нажимать». Фокусировка (Focus) Когда пользователь работает с клавиатурой или кликает на поле ввода, интерфейс должен дать понять, что сейчас в центре внимания. Состояния элементов (загрузка, успех, ошибка) Один из важнейших паттернов — отображение состояний элементов. Представьте, что вы нажали кнопку отправки формы. Если ничего не произошло, пользователь может подумать: «Что-то сломалось». А если кнопка покажет анимацию загрузки, потом галочку или крестик — это мгновенная, понятная обратная связь. Переходы между экранами (Transitions) Когда вы листаете слайды, открываете новую вкладку или переключаете панель — переход должен быть плавным. Резкий скачок контента сбивает с толку. Хороший анимированный переход помогает понять: вы не на другом сайте, а внутри одного и того же пространства, просто переместились внутри него. Микровзаимодействия (Microinteractions) Это небольшие, почти незаметные анимации, которые появляются при конкретных действиях: лайк, добавление в корзину, переключение тумблера. Они придают «живость» интерфейсу и формируют эмоциональную связь. Пример Представляем вам еще один интерактивный пример. Скопируйте код, вставьте в ваш Pen и изучайте поведение интерфейсных анимаций. Посмотреть код анимации Медиа-запросы и адаптивность Современные интерфейсы живут в мире разнообразных экранов. Пользователь может открыть сайт с ноутбука, планшета, смартфона или даже телевизора — и в каждом случае он ожидает, что все будет работать одинаково хорошо. Адаптивность — это не только уместное отображение элементов. Это также: сохранение интуитивной структуры; сохранение функциональности; корректная работа всех эффектов и анимаций; оптимизация визуального восприятия под конкретную среду: экран, освещение, тип ввода (тач/клавиатура/мышь). Именно анимации требуют к себе особого отношения. На мобильных устройствах они могут казаться слишком резкими, а на больших экранах — чересчур мелкими. Медиа-запросы Медиа-запросы — это условные конструкции в CSS, позволяющие применять стили в зависимости от характеристик устройства. Они проверяют не контент, а среду, в которой этот контент отображается. Основные параметры: ширина (width); высота (height); ориентация (orientation); плотность пикселей (resolution); цветовая схема (prefers-color-scheme); предпочтения по анимации (prefers-reduced-motion). С точки зрения анимаций, особенно важны: max-width и min-width — позволяют переключать типы анимаций для мобильных устройств и десктопов; prefers-reduced-motion — глобальная настройка пользователя, сигнализирующая о том, что ему тяжело воспринимать движение на экране; hover, pointer: позволяют определить, есть ли у устройства мышь, или только сенсорный ввод. Принципы адаптивной анимации Меньше движения — на меньших экранах. Мобильные пользователи часто воспринимают избыточную анимацию как раздражающую. Лучше выбирать более компактные, легкие по восприятию эффекты. Учитывайте тип ввода. На десктопе удобно использовать эффекты при наведении, на мобильном устройстве — акценты при тапе. Анимация не должна мешать содержимому. Если на десктопе всплывающее меню может красиво выезжать сбоку, на мобильном лучше отдать предпочтение модальному окну или появлению снизу — ближе к пальцам. Анимация — это не цель, а средство. Она должна не просто работать, а быть адаптированной под то, как человек держит устройство, что он видит и в каком контексте взаимодействует. Адаптация анимации под разные экраны CSS не позволяет использовать медиа (@media) внутри блока @keyframes. Это значит, что мы не можем изменить ключевые кадры «на лету» в зависимости от экрана. Но мы можем создать несколько разных анимаций — и применять ту или иную в нужный момент через медиа-запросы. Такой подход позволяет полностью контролировать поведение объектов на разных устройствах — от скорости и расстояния до характера движения. Если нужно, чтобы на мобильных устройствах объект «дрожал», а на десктопе — «прыгал», мы описываем две анимации, и в @media выбираем нужную. Пример Мы подготовили еще один интерактивный пример для демонстрации адаптивной анимации. Посмотреть код анимации Преобразование GIF в CSS GIF — один из старейших и самых простых способов добавить анимацию на веб-страницу. Он отлично справляется со своей задачей, особенно когда нужно показать запись экрана, сложную графику или готовый визуальный эффект. Однако во многих случаях, когда речь идет о простейших анимациях интерфейса, GIF может быть избыточен. Хорошая новость: во многих сценариях можно добиться аналогичного визуального результата с помощью CSS-анимации — без дополнительных файлов и с полной интеграцией в кодовую базу проекта. Когда можно (и стоит) заменить GIF на CSS-анимацию CSS-анимация уместна, если: вы хотите легковесное решение, не требующее загрузки внешних медиафайлов; анимация строится из простых геометрических форм или иконок; нужно добиться гибкого управления — запуск по клику, остановка, изменение скорости, взаимодействие с другими элементами; требуется адаптивность под разные экраны или цветовые темы; анимация — часть интерфейса (например, загрузка, фидбэк, ховер-эффект). Как имитировать поведение GIF средствами CSS GIF по своей сути — это набор кадров, проигрываемых по кругу. В CSS это можно реализовать с помощью анимации ключевых кадров: Дальше анимация применяется к элементу: А чтобы сделать проигрывание по кругу, как у GIF, достаточно указать infinite — и анимация будет повторяться бесконечно. Как воссоздать сложную GIF-анимацию Если у вас уже есть GIF и вы хотите переделать его в CSS-анимацию — это возможно, хотя и не всегда просто. Воспользуйтесь одним из способов Отрисовать элементы с нуля. Если вы имеете дело с анимацией иконок, геометрических фигур, загрузчиков и других простых визуальных форм — можно создать HTML-структуру и применить keyframes. Такой подход гибкий и максимально оптимальный по весу. Спрайты. Иногда GIF можно разобрать на кадры, собрать их в один спрайт и проигрывать с помощью изменения background-position. Это даст очень близкий результат и при этом можно регулировать скорость и повтор. Последовательность изображений. Более сложный способ, похожий на видео: кадры экспортируются как отдельные картинки, и их отображение регулируется через CSS + JS. Используется реже, но для некоторых задач — эффективен. Когда не стоит заменять GIF Вы показываете видеозапись интерфейса или действия пользователя. Анимация слишком сложная для воссоздания с помощью CSS (например, реалистичный дым, вода, 3D), нет времени разбираться с Canvas. Нужна быстрая демонстрация, которую проще записать и вставить, чем программировать. В этих случаях GIF (или даже лучше — MP4/WebM) остается отличным инструментом. Canvas и нестандартные эффекты CSS-анимации и трансформации прекрасно справляются с подавляющим большинством интерфейсных задач. Но когда хочется выйти за рамки обычного, например, создать частицу, сымитировать физику, реализовать рисование, нестандартную анимацию фона или обработку изображений в реальном времени, тут в игру вступает Canvas. Canvas — это HTML-элемент, представляющий область для рисования, управляемую через JavaScript. В отличие от DOM-элементов, Canvas не содержит внутренних узлов, с которыми можно взаимодействовать привычным образом. Он работает как двумерная поверхность, где вы вручную отрисовываете все — от фона до каждой точки или линии. Как работают эффекты на Canvas Работа с Canvas строится по следующей логике: Создаем элемент в HTML. Получаем его контекст (чаще всего 2d) через JavaScript: Определяем, что рисовать: линии, окружности, спрайты и т.д. Используем анимационный цикл requestAnimationFrame, чтобы отрисовывать каждый кадр: Можно создавать сотни и тысячи объектов (например, частицы), обновлять их координаты, цвета, взаимодействия — и это все будет работать быстро и плавно, если правильно оптимизировать. Когда использовать Canvas Использование Canvas оправдано, когда: стандартные CSS-возможности уже не дают нужного результата; нужно управлять большим количеством объектов одновременно; вы хотите создать вау-эффект, который привлечет внимание; анимация должна быть гибко управляемой, реагирующей на события в реальном времени; вы делаете гибкую визуализацию данных или динамическую графику. Когда не стоит использовать Canvas Если вы просто хотите анимировать появление элемента или ховер-эффект — Canvas будет избыточным. Canvas не доступен для средств чтения с экрана, в отличие от DOM. Интерфейсные элементы (кнопки, поля и пр.) лучше не строить на Canvas. Обработка событий и логика может быть сложнее — не всегда стоит оправдывать сложность реализации ради сомнительного выигрыша в визуале. Пример Далее приведен пример анимации, которую можно сделать с помощью Canvas. При клике создается множество частиц, которые разлетаются в разные стороны. Посмотреть код анимации Анимации через Chart.js Когда мы говорим об анимации графиков, чаще всего подразумеваем не декоративные эффекты, а понятный и живой способ показать изменение данных. Библиотека Chart.js предоставляет мощный инструмент для создания анимированных визуализаций, не требуя при этом глубокого погружения в мир SVG или Canvas. Одна из сильных сторон Chart.js — встроенная поддержка анимации. Как только вы рендерите график, библиотека автоматически «оживляет» его: столбцы начинают расти, линии — вычерчиваться, сегменты диаграмм — разворачиваться. Анимация помогает пользователю прочитать изменение: появляется ощущение времени и последовательности. Особенно это заметно при обновлении графиков, когда данные не просто перерисовываются, а буквально меняются на глазах — именно то, чего не хватает статичным изображениям. Chart.js позволяет точно настроить анимацию под свои нужды. Вы можете управлять ее длительностью, стилем (например, сделать плавную, упругую или поэтапную), отключить или наоборот, усилить для определенных ситуаций. Все это настраивается через объект animation в конфигурации графика. Далее приведен интерактивный пример, показывающий возможности Chart.js. Перед тем как скопировать его в свой Pen, подключите соответствующую библиотеку в настройках CodePen: Нажмите Settings и перейдите на вкладку JS. В разделе Add External Scripts/Pens введите URL библиотеки: https://cdn.jsdelivr.net/npm/chart.js. Нажмите Save & Close — библиотека будет подключена. Посмотреть код анимации А что дальше Если вы экспериментируете с анимациями в Codepen или делаете интерактивные интерфейсы, рано или поздно наступает момент, когда хочется вынести свои идеи за пределы песочницы: развернуть собственный сайт, добавить серверную логику или собрать демонстрационный стенд. Облачные серверы от Selectel — идеальное решение для запуска проектов на базе HTML/CSS/JS, веб-анимаций и UI-прототипов. Это мощная платформа, которую можно быстро адаптировать под любые задачи. Моментальное масштабирование — добавляйте ресурсы по мере роста нагрузки или отключайте, если проект «отдыхает». Гибкость — можно выбрать любые конфигурации и операционные системы. Интеграция — легко подключается к объектному хранилищу, базам данных и другим сервисам Selectel. Соответствие 152-ФЗ — безопасность персональных данных по российскому законодательству. Заключение Анимации — это не просто визуальные эффекты, а язык, с помощью которого интерфейсы разговаривают с пользователем. В этой статье вы узнали, как создавать такие эффекты, управлять ими, делать интерфейс живым и отзывчивым. Экспериментируйте, воплощайте идеи — и пусть все, что вы создаете, оживает на экране.