Давно ушли те времена, когда интернет был просто местом для хранения информации. Поиск нужной статьи или файла был целью посещения сети, и никто не ожидал от сайтов интерактивности. Максимум, чем нас радовал интернет, это моргающие 5-и кадровые гифки, или в лучшем случае — flash анимация. Эти технологии начала нулевых были заменены более эффективными и менее ресурсозатратными.
Со временем появилась возможность отправить пользователя интернета в сенсорное путешествие по сайту, задерживая его на нужных фрагментах или даже отправить по всем страничкам, в поисках уже не просто информации, а специфического удовольствия от визуальных спецэффектов. Но это, по большей части, сайты рекламные и относящиеся к активному продвижению единичных предложений. Главная их цель — оставить в памяти человека яркие ассоциации. Такие сайты занимают довольно небольшой сегмент интернет-ресурсов.
Тем не менее вэб-технологии спецэффектов и анимации получили распространение в сети в виде отдельных и довольно конкретных ситуаций взаимодействия с пользователем.

Всё это развитие вэб-технологий сопряжено с геометрическим ростом количества разнообразных сайтов. И теперь главная задача вэб-разработчика — удержать пользователя на сайте. Одним из эффективных методов является использование анимации в вэб-дизайне.
Можно выделить условные области сайта, где интерактивность просто необходима, а где можно ей пренебречь в пользу уменьшения трафика, что при современной скорости интернета становится всё менее актуальным условием.

Итак, обязательными для применения анимации стали все кликабельные фрагменты сайта — кнопки, формы ввода, ссылки, значки, ожидающие клика по ним с целью получения какого угодно результата. Задача разработчика — обозначить такие области сайта как интерактивные, и это первый и самый важный фактор создания анимации в этих местах, так как современный пользователь подсознательно, по давно выработанной привычке, ищет на странице такие области, и главной подсказкой является изменение их внешнего вида при наведении курсора.
Конечно, с этой задачей справится и назначение стиля для обычного псевдокласса hover, но для увеличения конверсии можно сделать и простое наведение курсора более интересным, используя возможности современных языков программирования.
Современные компьютеры, планшеты и телефоны имеют возможности аппаратного ускорения графики, поэтому с точки зрения скорости отображения лучше использовать для анимации язык CSS3 и SVG.

Компьютерная анимация связана с созданием ключевых кадров с автоматической интерполяцией трансформации анимируемого объекта. Такая-же возможность появилась у разработчиков при стилевом оформлении средствами CSS3. Мы можем объявить состояние объекта в любой точке нашего таймлайна с помощью @keyframes

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

Одним из важных визуальных эффектов является плавное появление фрагментов страницы при её загрузке, и @keyframes наилучшим образом подходит для этой задачи. С его помощью можно анимировать прозрачность, отступ или положение блока, и для пользователя время загрузки контента перестанет быть скучным ожиданием. Имея в распоряжении параметр delay можно назначить задержку начала анимации. Таким образом легко добиться постепенного появления на странице всего контента поочередно; при этом у пользователя создается впечатление быстрой загрузки сайта. Этот метод очень полезен при создании больших лэндингов с фоновыми растровыми изображениями, которые, как известно, снижают скорость открытия страницы, даже при их полной оптимизации. Но обойтись без них красивому сайту практически не возможно. Чтобы избежать пропусков начала анимационного цикла можно заставить сайт сначала загрузить весь контент страницы и только после этого начать обрабатывать анимацию @keyframes.

Добавив этот стиль к тегу body мы скрываем содержимое сайта до окончания загрузки. Анимация @keyframes начнется после обработки события onload, и мы увидим полностью проигранную анимацию сайта на экране.

Обработка стилевого файла браузером происходит непосредственно при загрузке страницы сайта, поэтому @keyframes запускается не зависимо от того, виден ли элемент на экране или не виден, в случае, если он находится внизу страницы. Соответственно, его плавное появление мы не увидим, потому что при скролле страницы до этого блока анимация уже будет в состоянии 100%. Решить эту проблему средствами CSS3 нельзя и придется задействовать JavaScript для отслеживания положения объекта на экране. Скорее всего на странице есть несколько последовательно анимированных блоков, которые нужно отслеживать. Чтобы не писать программу для каждого элемента, существуют библиотеки jQery, упрощающие эту задачу. Её достаточно подключить и активировать.

После этого ко всем элементам с анимацией добавляем class="wow". Теперь при скролле страницы @keyframes запускает анимацию как только блок появляется в нижней части экрана, поэтому задержка (delay) около 300 миллисекунд подойдет для срабатывания анимации в тот момент, когда блок целиком находится в области экрана.

Анимация в вэб-дизайне отличается от визуальных эффектов кино. Пользователь, как правило, не готов любоваться долгими красивыми переходами и спецэффектами по той причине, что интернет по своей сути всё-же остается местом поиска информации, и реже развлечением, а задача разработчика заключается в том, что-бы направить его к той самой информации или к полезному для пользователя действию. Поэтому важно соблюдать довольно тонкий баланс в продолжительности анимации элементов. Она должна быть быстрой, но при этом заметно плавной и последовательной.
Как правило, для красивой загрузки сайта время анимации блоков достаточно в диапазоне 300 — 600 миллисекунд. При этом задержка срабатывания анимации относительно очередности появления блоков вполне может быть и 50 — 100 миллисекунд. Для элементов, реагирующих на наведение курсора, время анимации достаточно установить в диапазоне 200 — 800 миллисекунд, в зависимости от анимируемого параметра. Для плавного изменения цвета хватит скорости 200 — 300 миллисекунд, а движение объекта или изменение его формы требует 600 — 800 миллисекунд. Главное в этом деле — не затягивать с реакцией элемента на действие пользователя.

Реалистичность компьютерной анимации во многом зависит от движений, напоминающих нам привычные для нас физические законы. Другими словами — в природе нет прямолинейного движения из точки А в точку Б, но есть ускорение или замедление. Сложные программы 3D и 2D анимации используют при интерполяции состояния анимируемого объекта кривые Безье. С их помощью можно настроить состояние объекта между фиксированными ключевыми кадрами и распределить неравномерно автоматическую генерацию значений.
CSS3 позволяет нам использовать эту возможность с помощью параметра timing-function. Значения этого параметра можно выбрать из уже существующих - linear, ease, ease-in, ease-out и ease-in-out.
В большинстве случаев этих настроек достаточно для создания красивой и реалистичной анимации, но есть возможность и более тонкой настройки. Анимировать, к примеру, прыгающий мячик можно поиграв со значением cubic-bezier ().
Для этого существуют онлайн-генераторы, например Ceaser

В старых фильмах про будущее не редко можно увидеть газеты с видео вместо привычных черно-белых фотографий. Так их создатели выражали стремление человека к живой картинке — она более информативна, так как содержит деталей больше, чем статичное изображение. И даже если это движение не содержит в себе основной смысл, то сопутствующий текст становится более запоминающимся. В вэб-дизайне можно использовать этот эффект в полной мере, расположив анимированные объекты в информативных зонах страницы.
Пожалуй, самый распространенный способ сразу заинтересовать пользователя — сделать анимированный логотип. Конечно, нельзя забывать в этом случае о вышесказанном балансе. Технология SVG позволяет сделать четкий векторный логотип с движущимися элементами. Естественно, что не каждый логотип возможно анимировать, но легкое движение придать его деталям будет достаточно для того, что бы на этапе ознакомления с сайтом заинтересовать посетителя.
SVG является векторным форматом, то есть он состоит из описания координат, которыми можно управлять простыми средствами CSS прямо внутри файла SVG. Это значит, что размещение SVG изображения на сайте не отличается от размещения растрового изображения, но имеет ряд безусловных преимуществ, главным из которых является его максимальная четкость при любом размере, а значит и масштабировании на экране. То есть использование всех иконок, логотипов, значков, кнопок и даже градиентных фоновых заливок в формате SVG позволяет не только существенно уменьшить «вес» страницы, но и сделать её живой в буквальном смысле.
Анимированный логотип, движущиеся объекты в оформлении инфографики и даже плавно меняющий цвет градиентный фон позволяют получить как минимум два существенных преимущества — эффект интерактивности и быстрая работа сайта.

Автор: Денис Коноплин