Как сделать анимацию в html

Виды анимации на верстке: свойства, особенности, примеры кода

Frontend-разработчик нашей компании Данила Абрамов рассказывает, как оптимизировать анимации и делать их плавными. В статье разберем CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.

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

Виды анимаций

Самые простые и распространённые виды анимаций — CSS Transition и CSS Animation.

CSS Transition

Transition — это сокращённое CSS-свойство, которое позволяет управлять плавным переходом между двумя состояниями элемента.

Свойство Transition состоит из:

• transition-property — название свойства, к которому применяется эффект перехода.
• transition-duration — длительность перехода.
• transition-timing-function — временную функцию перехода (то, как будут определены промежуточные значения для свойства, которое участвует в переходе).
• transition-delay — задержку перед началом перехода.

button:hover

Плюсы: Это наилучший способ (с точки зрения простоты и быстродействия), когда есть всего два состояния элемента в зависимости от одного условия. Например, при наведении мышкой, при нажатии на элемент, и т. п.

Минусы: transition не позволяет изменять свойства элемента, если состояний больше, чем два. Также невозможно делать бесконечные анимации.

Особенности: в значении свойства transition можно указывать как отдельные CSS-свойства со своими значениями, так и использовать ключевое слово all. Оно скажет браузеру использовать переход для всех свойств, которые есть внутри CSS-правила.

CSS Animation

Animation — сокращённое CSS-свойство, включающее в себя:

• animation-name — название.
• animation-duration — длительность.
• animation-timing-function — временную функцию (по аналогии с transition-timing-function).
• animation-delay — задержку перед началом.
• animation-iteration-count — количество повторений.
• animation-direction — направление (можно запустить анимацию наоборот, начиная с конца).
• animation-fill-mode — то, как будут применяться стили ключевых кадров до и после окончания анимации.
• animation-play-state — свойство, которое позволяет поставить анимацию на паузу и продолжить с того места, на котором она остановилась.

Чтобы создать анимацию, нужно описать директиву @keyframes с названием анимации и описанием ключевых кадров:

@keyframes shift < 10% < transform: translate3d(0, 0, 0); >20% < transform: translate3d(-20px, 0, 0); >50% < transform: translate3d(10px, 0, 0); >75% < transform: translate3d(-7px, 0, 0); >100% < transform: translate3d(0, 0, 0); >>

Для того, чтобы использовать эту анимацию, достаточно добавить к элементу свойство animation с названием анимации и её опциями:

element.is-animated < animation: shift 1700ms linear 1000ms infinite;

В следующем простом примере при клике на элемент в JS добавляется и удаляется класс .is-animated, что включает и выключает анимацию

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

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

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

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

SVG animation

SVG можно анимировать двумя способами: с помощью CSS-анимации SMIL-анимации.

Анимация SVG с помощью CSS ничем не отличается от обычной animation. Мы также с помощью @keyframes создаём анимацию, описываем в ней свойства, которые изменяем, и используем её при необходимости.

• если в SVG что-то не получилось анимировать с помощью CSS-анимации,
• или нужно устанавливать зависимости между разными анимациями (например, запустить вторую анимацию через 3 секунды после того, как закончится первая анимация),
• либо нужно плавно превратить один вид SVG в другой, во всех этих (и некоторых других) случаях необходимо использовать SMIL-анимацию для SVG.

Так выглядит простая SMIL-анимация движения круга по клику мышки:

1) Анимация SMIL + CSS. На CSS анимируется изменение цвета и перемещение фигуры, с помощью SMIL фигура изменяет свой контур.

2) Здесь анимация полностью сделана с помощью SMIL

3) Ещё один пример морфинга (изменение контура SVG)

Плюсы:

• SMIL анимация будет работать даже если вам нужно вставить SVG с помощью тега img, либо через background-image в CSS.
• С помощью SMIL анимации можно анимировать те атрибуты, которые не доступны для CSS-анимации. Например, анимировать точки в теге , чтоб создать эффект плавного перехода от одной фигуры к другой.

Минусы: По сути SMIL-анимация — это отдельная спецификация со своими правилами и тонкостями, которую необходимо изучать отдельно от CSS.

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

JS-Анимация

Говоря простым языком, это плавное изменение стилей элемента через JavaScript. С помощью JS анимации можно контролировать все стили элемента на любом этапе анимации, менять их в зависимости от любых условий. С помощью чистого JS делаются анимации переключения слайдов, раскрытие-закрытие аккордеона, различные перемещения блоков по определённым условиям, и многое многое другое.

1) Довольно необычный слайдер

2) Анимация эффекта при движении мышкой

Плюсы: Анимация с помощью JavaScript позволяет сделать то, на что не способна CSS-анимация. Можно как угодно манипулировать элементами. Также в любом месте анимации её можно замедлять, приостанавливать, и т.п.

Минусы: JS-анимация часто более ресурсозатратна для браузеров.

Особенности:

• если написать JS-анимацию неправильно, то есть большой шанс, что на слабых устройствах она будет тормозить. Как этого избежать поговорим ниже.
• для JS-анимаций есть большое количество готовых библиотек (например, anime.js), которые позволяют создавать анимации быстрее и эффективнее (особенно сложные), нежели писать их руками.

JS canvas

Canvas — это холст. То есть всего лишь один тег в html-коде. При создании анимации внутри canvas все изменения происходят внутри одного тега. Всё, что находится внутри canvas, не существует в DOM-дереве. Но с помощью JS мы можем создавать, перемещать и изменять любые элементы, которые будут находиться в canvas.

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

Минусы: как и все предыдущие виды анимаций, canvas позволяет реализовать только 2D-графику.

1) Анимация снегопада

2) Игра змейка на canvas

JS. WebGL / ThreeJs

WebGL — технология, которая добавляет в браузер 3D-графику. Самая популярная библиотека для работы с WebGL (на данный момент) — three.js. Она существенно упрощает порог вхождения в технологию WebGL. Благодаря поддержке 3d, с помощью three.js часто делаются браузерные 3d игры.

• На этом сайте приведены примеры игр, созданных с помощью three.js
• Земля (шар), на которой есть интерактивные точки. При нажатии на точки открываются описания.

Плюсы: это единственная возможность создавать полноценную 3D-анимацию в браузере.

Минусы: даже учитывая, что three.js оптимизирует анимацию, чаще всего анимация на three.js — это огромная нагрузка на браузер, и на средних и слабых компьютерах анимация будет тормозить.

Как работают анимации в браузере

Что происходит в браузере, когда мы запускаем анимацию? Каким образом браузер перерисовывает все эти кадры? Какие процессы происходят кроме просто перерисовки стилей? Зная ответы на эти вопросы, можно грамотно оптимизировать анимацию.

Вот 5 основных этапов, которые проходит браузер во время анимации:

1) JavaScript. Браузер смотрит влияние JavaScript на стили на странице.

2) Style. Из CSS для каждого элемента рассчитываются стили, которые отвечают за внешний вид (размеры, отступы, цвета).

3) Layout. Браузер рассчитывает местоположение каждого элемента относительно друг друга. А также как они влияют друг на друга.

На всех этих этапах браузер не отрисовывает элементы. Он всего лишь считывает их характеристики.

4) Paint. На данном этапе уже прорисовываются все элементы. Каждый пиксель каждого элемента.

5) Composite. Происходит проверка, какой элемент на какой наложился сверху. Например, снизу фон, а поверх него остальные элементы.

Все 5 этапов проходят по умолчанию при загрузке страницы.

Во время анимации в браузере могут быть три варианта:

• Все эти 5 этапов проходят тогда, когда мы изменяем CSS-свойства, которые рассчитываются на процессоре (CPU) и влияют на размеры элемента, его местоположение, внешние и внутренние отступы. Это худший вариант.

• Если мы изменяем свойства, которые не влияют на расположение элемента (фон, тени, цвет, и т. п.), то браузер проходит 4 этапа — 1, 2, 4, 5 (без третьего, одного из самых затратных, — этапа Layout).
• Лучшим вариантом анимаций с точки зрения работы браузера будет вариант, когда мы проходим только 1, 2, и 5 этап. (без этапов Layout и Paint). Это возможно, если использовать свойства opacity и transform. opacity — это просто прозрачность, а transform фиксирует область за элементом, и для него перестаёт просчитываться взаимодействие с другими элементами. Это позволяет не перерисовывать всю страницу.

Основные правила для успешной работы анимаций

Самая сложная и важная часть веб-анимации — добиться её плавности. То есть сделать так, чтоб количество кадров анимации приблизилось к 60 fps. Существует множество факторов, которые влияют на плавность анимации — это и мощность устройства, и размеры экрана, и количество пикселей на экране, и многое другое.

Приведу несколько способов оптимизации анимаций.

• С transition лучше не использовать ключевое слово all, а задавать конкретные свойства, поскольку в CSS-правиле в дальнейшем могут добавиться другие свойства, переход между которыми нам не нужен. Также, когда используется ключевое all, браузер проходит по всем свойствам в CSS-правиле, определяя, какие можно анимировать, а какие нет. Это создаёт лишнюю нагрузку, что незначительно, но всё же влияет на быстродействие анимации.

• Использовать свойства, изменение которых не заставляет браузер перерисовывать всю страницу, особенно всё, что относится к размерам.

• Выносить анимированные элементы на отдельный слой, чтобы анимация происходила за с помощью видеокарты. (transform: translateZ(0); или transform: translate3d(0, 0, 0); )

• использовать свойство will-change, которое заранее говорит браузеру о тех свойствах, которые будут анимированы. При этом браузер оптимизирует анимацию, и, если нужно, то переносит рендеринг видеокарту. (Не следует использовать для простой анимации, чтоб не путать браузер на что нужно, а на что не стоит тратить особенное внимание).

• Если элемент визуально отсутствует на странице после или до анимации, то необходимо его скрыть с помощью display: none или visibility: hidden, для того, чтоб освободить ресурсы браузера. Это полностью выключит считывание событий и считывание анимаций.

• Если анимаций много, то лучше запускать их последовательно. Лучше для этого не использовать delay, потому что это равнозначно одновременному запуску нескольких анимаций, что съедает ресурсы.

• При начале разработки анимацию следует тестировать на разных, особенно слабых, устройствах. Если анимация тормозит, можноизменить подход или как-то оптимизировать анимацию. Если же это тестировать в конце, то возможно придётся всё переписывать, что увеличит время разработки.

• Если используем JS-анимацию, то обязательно нужно использовать функцию window.requestAnimationFrame(). В коде это выглядит так:

function step() < // код функции, который анимирует элемент window.requestAnimationFrame(step); >window.requestAnimationFrame(step);

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

• Всегда просить коллег посмотреть и саму анимацию, и код, для того, чтобы можно было что-то оптимизировать. При долгой работе над анимациями замыливается глаз. Очень важен взгляд со стороны.

Итог

Хочу обратить особенное внимание на то, что при создании веб-анимации важно думать о том, как с этим будет работать браузер, что именно он будет делать. Например, сколько раз и за какое время он будет вызывать события для запуска анимации. И о том, насколько анимация затрагивает перерисовку блоков или даже всей страницы. За счёт каких ресурсов компьютера будет исполняться код (CPU или GPU). По возможности не стоит переусложнять анимацию. Чем проще анимация, тем она производительнее. Анимация должна быть украшением, но никак не мешать пользователям пользоваться сайтом или приложением.

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

• анимация
• анимация скролла
• анимация фрагментов
• анимация прототипов

Как создать сайт с использованием анимации при загрузке страницы

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

Алексей Кодов
Автор статьи
2 июня 2023 в 11:16

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

Шаг 1: Создание HTML-структуры

Сначала создадим простую HTML-структуру для нашего сайта. Вот пример HTML-кода:

      
Заголовок сайта
 
Основной контент сайта
    

Шаг 2: Создание анимации загрузки

Теперь создадим анимацию загрузки с использованием CSS. В файле style.css мы добавим следующий код:

.loader < position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; display: flex; justify-content: center; align-items: center; >.loader::before < content: ""; width: 50px; height: 50px; border: 5px solid #000000; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; >@keyframes spin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>

�� Этот код создает простую анимацию вращения, которая будет показываться на весь экран во время загрузки страницы.

Шаг 3: Реализация скрытия анимации после загрузки страницы

Теперь нам нужно скрыть анимацию загрузки после того, как страница будет полностью загружена. Для этого добавим следующий код в файл script.js :

window.addEventListener('load', function () < const loader = document.querySelector('.loader'); loader.classList.add('hidden'); >);

Затем добавим следующий CSS-код в файл style.css :

.hidden

�� Этот код скрывает анимацию загрузки после того, как страница полностью загружена, с плавным переходом на прозрачность.

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Теперь у вас есть сайт с анимацией при загрузке страницы! Это всего лишь один из множества способов реализации анимации загрузки, и вы можете экспериментировать с разными стилями и анимациями, чтобы найти идеальный вариант для вашего проекта.

Если вы хотите углубиться в обучение веб-разработке, рекомендую обратить внимание на знакомую школу, которая хорошо учит «Веб-разработка». Не забудьте практиковаться и экспериментировать, чтобы стать опытным разработчиком. Удачи вам!

Урок: создание анимации

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

Анимация состоит из плавных изменений одного состояния элемента в другое с помощью функций перехода animation-timing-function на протяжении указанного времени. На каждом этапе анимации можно задавать свою функцию перехода.

Самое главное при создании анимации — правильно задать ключевые моменты. Анимация может начинаться с 50% , а начальное и конечное состояния анимируемого элемента будут соответствовать заданному в свойствах элемента (так называемые вычисляемые значения).

See the Pen Clouds animation by Elena Nazarova (@nazarelen) on CodePen.

Основные элементы (башня, дом, одиночное облако) рисуются с помощью CSS-стилей, а элементы отделки (крыша, окна и маленькое облачко) — с использованием псевдоэлементов :before и :after .

body < margin: 0; background: white; /*скрываем облака, когда они будут выходит за границы голубого блока*/ >.picture < width: 270px; height: 270px; background: #CFDEE6; border-radius: 50%; margin: 50px auto 0; position: relative; /*задаем относительное позиционирование, чтобы абсолютно позиционировать элементы внутри*/ overflow: hidden; /*скрываем облака, когда они будут уходить за границы блока*/ >.tower < width: 36px; height: 96px; background: white; position: absolute; bottom: 84px; left: 66px; >.tower:before < content: ""; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 24px solid #D56851; position: absolute; top: -24px; >.tower:after < content: ""; width: 12px; height: 15px; background: #6D6D6D; position: absolute; top: 12px; left: 12px; >.house < width: 126px; height: 36px; background: white; position: absolute; left: 75px; bottom: 84px; >.house:before < content: ""; width: 110px; height: 0; border-bottom: 15px solid #D56851; border-right: 16px solid transparent; position: absolute; top: -15px; >.house:after < content: ""; width: 83px; height: 21px; background: #D56851; position: absolute; top: -36px; left: 27px; >ul < margin: 7px 0 0 27px; padding: 0; list-style: none; >li < display: inline-block; width: 12px; height: 18px; background: #6D6D6D; >li:nth-child(3) < margin-right: 10px; >@-webkit-keyframes clouds < 50% /*перемещаем блок с облаками за правый край голубого блока, постепенно делая блок прозрачным*/ 51% /*чтобы когда он начал перемещаться за левый край голубого блока, его не было видно*/ 100% /*смещаем блок с облаками за левую границу голубого блока*/ > @keyframes clouds < 50% 51% 100% > .clouds < width: 110px; height: 40px; position: relative; overflow: hidden; top: 60px; left: -110px; -webkit-animation: clouds 20s linear infinite; animation: clouds 20s linear infinite; >.clouds-two < width: 110px; height: 40px; position: relative; overflow: hidden; top: 20px; left: -110px; -webkit-animation: clouds 20s linear infinite 10s; /*добавляем для второго блока с облаками задержку в анимации*/ animation: clouds 20s linear infinite 10s; >.cloud < background: white; position: absolute; >.one < width: 30px; height: 15px; border-radius: 60px 60px 0 0; top: 0; left: 0; >.one:after < content: ""; width: 20px; height: 8px; background: white; border-radius: 40px 40px 0 0; position: absolute; left: 20px; top: 7px; >.two < width: 24px; height: 10px; border-radius: 48px 48px 0 0; top: 30px; left: 30px; >.three < width: 30px; height: 15px; border-radius: 60px 60px 0 0; top: 25px; left: 80px; >.three:before

Зачем нужны анимации в вебе и как их создавать

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

Даже совершенно обычный сайт можно оживить анимацией:

Анимации делают работу с сайтом удобной и приятной. Например, когда пользователь совершает действие, ему можно показать какие-то изменения на странице, как здесь:

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

Способы создания анимаций

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций:

• CSS-анимации,
• SVG-анимации,
• JavaScript-анимации.

CSS-анимации

Это самый простой способ анимировать объекты на странице. Он позволяет вращать, растягивать, уменьшать и увеличивать объект, перемещать его или выполнять другие действия.

CSS-анимации создают с помощью группы свойств animation . Они задают длительность анимации, количество повторений, зацикленность, стороны движения и другие характеристики:

• animation-name — имя анимации, можно задавать несколько имён через запятую;
• animation-direction — направление анимации;
• animation-fill-mode — состояние элемента до и после анимации;
• animation-play-state — управление состоянием: запуск или приостановка анимации;
• animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла;
• animation-delay — задержка начала выполнения анимации;
• animation-iteration-count — количество повторов анимации;
• animation-duration — длительность.

С помощью CSS можно создавать покадровые анимации — когда картинка, на которой нарисован объект в разных состояниях, превращается в движение. Для таких анимаций нужно иметь уже готовую раскадровку или склеить её самостоятельно из нескольких изображений.

CSS-анимация может быть объёмной. Для создания 3D-изображения используют свойство transform-style со значением preserve-3d . С его помощью можно вращать объект и изменять его в трёх плоскостях:

See the Pen 3d cube by liza (@sealeye) on CodePen.

Создавать CSS-анимации можно и с помощью свойства transition. Но оно работает только при загрузке страницы, добавлении классов или изменении состояния, к примеру, hover .

Посмотреть на CodePen. Луна тоже нарисована на чистом CSS.

CSS-анимации можно запускать при загрузке страницы или при определённом действии, но для этого иногда нужен JavaScript. Например, чтобы при открытии меню на мобильном кнопка бургера превращалась в крестик, нужно добавить ей соответствующий класс с помощью JS и для этого класса прописать изменения CSS-свойств.

Автор — Бенджамин Симье, посмотреть на CodePen.

С помощью CSS можно анимировать векторную графику — SVG. Например, заставить контур постепенно появляться или добавить индикатор загрузки:

Индикатор загрузки, автор — Стивен Робертс. Посмотреть на CodePen.

SVG-анимации

Внутри SVG есть отдельный способ анимаций — SMIL. Это спецификация для анимаций, действующая только внутри векторной графики. В ней определяется набор новых тегов и их атрибутов, которые обеспечивают работу с частями SVG.

SMIL применяют, когда CSS-анимации не справляются и не могут анимировать содержимое SVG. Например, его используют, когда нужно трансформировать форму фигуры, изменив координаты для линии или саму форму:

Автор: Никки Пантони, посмотреть на CodePen.

Или когда нужно заставить элемент двигаться по заданному пути:

Автор: Фабио, посмотреть на CodePen.

А такая анимация похожа на покадровую в CSS, но это всё ещё SMIL:

Автор: CRL, посмотреть на CodePen.

JavaScript-анимации

Третий способ создания анимаций — с помощью JavaScript. Его используют, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства.

Автор — Джереми Кэрис, посмотреть на CodePen.

Самые сложные анимации создают с помощью JavaScript, WebGL и специальных библиотек, которые упрощают написание кода к анимациям: Three.js, TweenMax или GSAP.

Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект».

⭐ Научитесь создавать качественные анимации: работать с векторной графикой, добавлять маски и фильтры, анимировать слайдеры, кнопки и другие элементы сайта.

Как создать простую анимацию

Самый простой способ познакомиться с анимациями — изучить свойства animation . В этом поможет документация MDN, переведённая на русский язык.

Попробуем вместе сделать простую анимацию — прыгающий мячик.

Сначала создадим HTML-разметку. Добавим два элемента. Первый — ball , сам мяч. Второй — ball-bg , элемент для фона, создаём его внутри ball. Делаем два разных элемента, потому что мячик будет скакать, а внутри него станет вращаться фон.

Добавляем базовую CSS-стилизацию для элементов: размеры, скругление углов, фон футбольного мяча.

.ball < font-size: .9px; width: 60em; height: 60em; border-radius: 50%; position: relative; >.ball-bg < width: 100%; height: 100%; background: url(http://guthriesports.files.wordpress.com/2010/03/soccer_ball_6.jpg) no-repeat center; >

Создаём первую анимацию с помощью директивы @keyframes . Называем её rotating-ball , так как она отвечает за вращение мяча. Внутри анимации добавляем две точки: от какого (0%) и до какого (100%) состояния должен вращаться мяч. Это будет 0 и 180 градусов соответственно. Градусы в CSS прописываем с помощью deg — 180deg .

Чтобы применить анимацию к элементу, задаём свойство animate элементу ball-bg . Чтобы проще было с ним разбираться, будем пользоваться отдельными свойствами внутри animate.

• имя анимации, которое указали в @keyframes (rotating-ball) ;
• длительность анимации — animation-duration — за сколько она проходит от точки 0% до 100%.
• количество повторений — animation-iteration-count, сделаем анимацию бесконечной — infinite;
• как будет развиваться анимация между ключевыми кадрами — animation-timing-function , сделаем равным linear .

@keyframes rotating-ball < 0% 100% > .ball

Теперь усложним анимацию: сделаем так, чтобы мяч прыгал. Для этого используем свойство transform и его значения:

• translate — для перемещения горизонтально и вертикально;
• scale — чтобы имитировать эффект сжатия и растягивания мяча, когда он ударяется об пол;
• rotate — придать дополнительное вращение при ударах.

У этой анимации будет больше ключевых кадров, потому что мы постараемся максимально подробно описать поведение мяча. Начнём с первого и последнего кадра. Потом добавим кадры, когда мяч должен ударяться об пол. Можно помочь себе и нарисовать с помощью CSS линию, чтобы видеть, обо что ударился мяч. При ударе об пол используем scale , чтобы сжать мяч. Так как на следующих шагах scale не будет, мяч вернётся к исходным размерам.

@keyframes bouncing-ball < 0% 12% 15% 18% 21% 45% 48% 51% 69% 72% 75% 90% 100% > 

Теперь применим анимацию к элементу ball . Длительность анимации делаем больше секунды.

.ball

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

Как оптимизировать анимации на сайте?

Чем больше анимаций на сайте, тем больше информации приходится обрабатывать браузеру. И чем сложнее анимации, тем медленнее отрисовывается страница. Поэтому важно выбирать правильные способы анимирования и не усложнять их. Например, если нужно просто вращать элемент вокруг своей оси, то лучше использовать animate и transform , а не подключать JS-библиотеку.

Свойство transform универсально для большинства ситуаций, и когда мы его используем, браузеру легче заново отрисовать изменения на странице. К примеру, если нужно переместить объект, то стоит использовать transform: translate , а не абсолютное позиционирование и координаты left и right .

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

Итоги

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

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

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

• Как защитить приложение от хакеров
• Что такое и зачем нужны алгоритмы
• HTML-шаблонизаторы

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