Поскольку анимация CSS теперь поддерживается как в браузерах Gecko, так и в браузерах WebKit, самое время попробовать её. Независимо от своей технической формы, будь то традиционная, компьютерная 3D, Flash или CSS, анимация всегда следует одним и тем же основным принципам.
В этой статье мы сделаем первые шаги и рассмотрим основные рекомендации по созданию анимации с помощью CSS. Мы будем работать над примером, создавая анимацию, используя принципы традиционной анимации. Наконец, мы увидим некоторые реальные варианты применения.
Итоговый листинг можно посмотреть на CodePen Ball Animation
Свойства CSS анимации
Прежде чем углубиться в детали, давайте настроим базовый CSS:
Анимация — это свойство CSS, которое позволяет анимировать большинство элементов HTML (таких как div, h1 и span) без JavaScript или Flash. В настоящий момент это поддерживается в WebKit браузерах, включая Safari 4+, Safari для iOS (iOS 2+), Chrome 1+ и Gecko браузерах, включая Firefox 5+. Неподдерживающие браузеры просто проигнорируют ваш код анимации, поэтому убедитесь, что страница не зависит от него!
Поскольку технология всё ещё относительно новая, требуются префиксы производителей браузеров. На данный момент синтаксис одинаков для каждого браузера, требуется только изменение префикса. В приведённых ниже примерах кода мы используем синтаксис WebKit.
Всё, что вам нужно для реализации CSS анимации, — это прикрепить анимацию к элементу CSS:
/* Это код анимации. */
@-webkit-keyframes example {
from { transform: scale(2.0); }
to { transform: scale(1.0); }
}
/* Это элемент, к которому мы применяем анимацию. */
div {
-webkit-animation-name: example;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out; /* ease по умолчанию */
-webkit-animation-iteration-count: 2; /* 1 по умолчанию */
-webkit-animation-direction: alternate; /* normal по умолчанию */
}Во-первых, у нас есть сам код анимации. Он может находиться где угодно в CSS, если элемент, который вы анимируете, может найти соответствующее animation-name.
При назначении анимации вашему элементу вы также можете использовать сокращение:
div {
-webkit-animation: example 1s ease-out 2 alternate;
}Мы сможем сократить это ещё больше, не вводя все значения. Без указания браузер вернётся к значению по умолчанию.
Это основы. В следующих разделах мы проработаем больше кода.
Применение принципов традиционной анимации
Disney — мастера традиционной анимации, — разработали 12 принципов и задокументировали их в своей знаменитой книге «The Illusion of Life». Эти базовые принципы можно применить ко всем видам анимации, и вам не нужно быть экспертами, чтобы следовать им. Мы будем работать над примером CSS анимации, в которой используются 12 принципов, превращающих базовую анимацию в более правдоподобную иллюзию.
Этот пример демонстрирует возможности CSS анимации. В приведённом далее коде мы используем пустые divs, чтобы показать, как это работает. Как мы все знаем, это не самый "семантический" способ написания кода, но цель состоит в том, чтобы показать, насколько просто оживить страницу так, как мы раньше не могли сделать в браузере.
Сквош (сжатие) и Стретч (растягивание)
Жёсткий прыгающий мяч — отличная демонстрация этого первого пункта. Если мяч падает на высокой скорости и ударяется об пол, вы увидите, как он сплющивается под действием силы, а затем растягивается обратно, подпрыгивая вверх.
На базовом уровне это должно придать нашей анимации ощущение веса и гибкости. Если бы мы уронили шар для боулинга, мы бы не ожидали, что он вообще сплющится — он может просто повредить пол.
Мы можем применить этот эффект сквоша (сжатия) и стретча (растягивания) с помощью свойства CSS3 — transform:
@-webkit-keyframes example {
0% { -webkit-transform: scaleY(1.0); }
50% { -webkit-transform: scaleY(1.2); }
100% { -webkit-transform: scaleY(1.0); }
}Это приведёт к масштабированию объекта по длине (по оси Y, вверх и вниз) в 1.2 раза по сравнению с исходным размером, а затем вернёт к исходному размеру.
Для этой анимации мы также используем более сложную синхронизацию (timing). Вы можете использовать from и to для базовых анимаций. Но вы также можете указать многие действия для анимации, используя проценты, как показано здесь.
Сейчас нам нужно переместить объект с помощью свойства translate. Мы можем комбинировать преобразования вместе:
50% {
-webkit-transform: translateY(-600px) scaleY(1.2);
}Свойство translate позволяет нам манипулировать объектом без изменения его базовых свойств (таких как позиция (position), ширина (width) или высота (height)), что делает его идеальным для CSS анимации. Это конкретное свойство translateY создаёт впечатление, будто мяч отскакивает от пола в середине анимации.
Да, это по-прежнему выглядит ерундово, но эта небольшая корректировка — первый шаг к тому, чтобы сделать анимацию более правдоподобной.
Задержка
Задержка добавляет напряжения или ощущения силы перед основным действием. Например, сгибание ног перед прыжком помогает зрителям предугадать, что будет дальше.
Чтобы создать здесь задержку, мы не допускаем немедленного падения мяча на сцену. Мы делаем это, просто регулируя процентные тайминги, чтобы между начальной точкой и первым действием не было движения.
@-webkit-keyframes ball-y {
0% { -webkit-transform: translateY(-600px) scaleY(1.2); }
35% { -webkit-transform: translateY(-600px) scaleY(1.2); } /* Та же позиция, что и на 0% */
65% { -webkit-transform: translateY(0px) scaleY(1.2); } /* Начинает двигаться в эту позицию после 35% */
67% { -webkit-transform: translateY(10px) scaleY(0.8); }
85% { -webkit-transform: translateY(-100px) scaleY(1.2); }
100% { -webkit-transform: translateY(0px); }
}В точке 35% мяч находится в том же месте, за пределами сцены, и не движется. Затем между 35% и 65% он внезапно перемещается на сцену, а за этим следует остальная часть анимации.
Вы также можете использовать свойство animation-delay для создания ожидания:
div {
-webkit-animation-delay: 1s;
}Но это может иметь нежелательные последствия. Свойство animation-delay просто игнорирует любой код анимации до наступления определённого момента. Таким образом, если ваша анимация начинается в позиции, отличной от позиции элемента, который вы анимируете, то объект будет внезапно подпрыгивать, как только начнётся отложенная анимация.
Это свойство лучше всего подходит для зацикливания анимации, которая начинается и заканчивается в одном и том же месте.
Постановка
Изображение от macrovector на Freepik
Постарайтесь придать театральность сцене — поместите анимацию в контекст. Вспомните мультфильмы Disney. Чем бы они были без фантастического фона? Это половина магии!
Сцена также является ключом к концентрации внимания. Как и на театральной сцене, освещение будет направлено на самую важную область. Сцена должна усиливать иллюзию. Для нашего прыгающего мяча я бы выбрал простой фон, чтобы сосредоточить внимание на том, куда приземлится мяч. Тогда зритель будет знать, что действие будет происходить в центре, и сцена больше не теряется в "снегу".
Прямолинейное действие против Постановки кадра
В традиционной анимации это выбор способа создания анимации. Самый простой вариант — нарисовать каждый кадр последовательности. Этот вариант называется «Прямолинейное действие». Вариант «Постановка кадра» заключается в создании нескольких ключевых кадров на протяжении всей последовательности, а затем заполнении пробелов позже.
В CSS анимации мы обычно используем последнее — постановку кадра. То есть мы добавим ключевые кадры действия, а затем браузер автоматически анимирует промежуточные кадры. Но мы можем попрактиковаться и на технике прямолинейного действия. Браузер может выполнять ограниченное количество эффектов, иногда вам придётся сделать это вручную и добавить больше "жёсткой" анимации, чтобы получить желаемый эффект.
Сквозное движение и Захлёст действия
Также известные как физика! Сквозное движение и захлёст действия чаще используются в анимации персонажей для движения тела, например, чтобы показать покачивание рук, когда персонаж их роняет, или падающие длинные волосы. Подумайте о человеке с большим животом, который быстро поворачивается: его тело поворачивается первым, а вскоре за ним следует и живот.
Для нас это означает правильную физику момента падения мяча. В приведённых выше демонстрациях мяч падает неестественно, как будто неподвластен гравитации. Мы хотим, чтобы мяч упал, а затем отскочил. Но этого лучше достичь с помощью следующего принципа.
Замедление движения
Этот принцип связан с ускорением и замедлением. Представьте себе автомобиль, который мчится и должен остановиться. Если он остановится мгновенно, это будет выглядеть неправдоподобно. Мы знаем, что машинам требуется время, чтобы замедлиться, поэтому нам придётся анимировать торможение и медленную остановку автомобиля.
Это также актуально для демонстрации эффекта гравитации. Представьте себе ребёнка на качелях. По мере приближения к высшей точке они замедляются. Когда они вернутся вниз и наберут скорость, их самая быстрая точка окажется внизу "дуги". Затем они поднимутся на противоположной стороне, и действие повторится.
Вернёмся к нашему примеру. Регулируя скорость замедления мяча, мы можем сделать падение более правдоподобным (наконец-то).
Когда мяч упадёт на пол, он мгновенно отскочит вверх. Достигнув высшей точки, он замедлится. Теперь похоже, что мяч действительно падает.
В CSS мы можем контролировать это с помощью свойства animation-timing-function:
-webkit-animation-timing-function: ease-out;Это свойство принимает следующие значения:
- ease-in — в начале анимация воспроизводится медленно, а затем ускоряется;
- ease-out — в начале быстро, а затем замедляется до полной остановки;
- ease-in-out — начинается медленно, ускоряется в середине, а затем замедляется до полной остановки;
- linear — воспроизводится с равномерной скоростью от начала до конца.
Вы также можете использовать функцию кривой Безье — bezier-curve, чтобы создать свою собственную скорость замедления.
ДУГИ (ARCS)
Согласно физике дуги следуют основному принципу: «то, что поднимается, должно опуститься». Дуги полезны при обдумывании траектории объекта.
Давайте вбросим мяч с левой стороны сцены. Убедительная анимация предскажет дугу, по которой упадёт мяч. А в нашем примере ему придётся предсказать следующую дугу, по которой будет падать мяч при отскоке.
Эту анимацию может быть немного сложнее настроить в CSS. Мы хотим анимировать движение мяча вверх, вниз и из стороны в сторону одновременно. Итак, мы хотим, чтобы наш мяч плавно двигался слева, продолжая при этом анимацию подпрыгивания, над которой мы работали. Вместо того чтобы пытаться объединить оба действия в одну анимацию, мы создадим две отдельные, что проще всего. Для этой демонстрации мы "обернём" наш мяч в другой элемент div и анимируем его отдельно.
HTML:
<div class="ball-x">
<div class="ball-y"></div>
</div>И CSS:
.ball-x {
/* Позиция мяча на сцене */
position: absolute;
top: calc(80% - 50px);
left: calc(50% - 50px);
/* Примените к элементу анимацию движения мяча в горизонтальном направлении. */
-webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
/* Функция cubic-bezier здесь предназначена для регулировки скорости анимации.
В этом примере мячу требуется больше времени, чтобы замедлиться. */
}
@-webkit-keyframes ball-x {
0% { -webkit-transform: translateX(-275px); }
100% { -webkit-transform: translateX(0px); }
}
.ball-y {
/* Примените к элементу анимацию движения мяча в вертикальном направлении. */
-webkit-animation: ball-y 1s ease-out infinite alternate;
}
@-webkit-keyframes ball-y {
0% { -webkit-transform: translateY(-600px) scaleY(1.2); }
35% { -webkit-transform: translateY(-600px) scaleY(1.2); } /* Та же позиция, что и на 0% */
65% { -webkit-transform: translateY(0px) scaleY(1.2); } /* Начинает двигаться в эту позицию после 35% */
67% { -webkit-transform: translateY(10px) scaleY(0.8); }
85% { -webkit-transform: translateY(-100px) scaleY(1.2); }
100% { -webkit-transform: translateY(0px); }
}Здесь у нас есть одна анимация для перемещения мяча из стороны в сторону (ball-x) и другая для отскока (ball-y). Единственным недостатком этого метода является то, что если вам нужно что-то действительно сложное, вы можете получить код с плохой "семантикой"!
Второстепенное действие
Второстепенное действие — это тонкость, которая делает анимацию более реалистичной. Это относится к деталям. Например, если бы у нас шёл кто-то с длинными волосами, основным действием была бы ходьба, а второстепенным было бы подпрыгивание волос или, возможно, взъерошивание одежды на ветру.
В нашем примере всё гораздо проще. Добавляя больше деталей к мячу, мы делаем второстепенным действием вращение мяча. Это создаёт иллюзию того, что мяч вбрасывается.
.ball-spin {
/* Примените к элементу анимацию вращения мяча. */
-webkit-animation: spin 2.5s;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(-180deg); }
100% { -webkit-transform: rotate(360deg); }
}Время (Timing)
Это просто время вашей анимации. Чем лучше выбран тайминг, тем реалистичнее она будет выглядеть.
Наш мяч — прекрасный тому пример. Текущая скорость вполне приемлема для такого лёгкого мяча. Если бы это был шар для боулинга, мы ожидали бы, что он упадёт гораздо быстрее. А если бы анимация была немного медленнее, это выглядело бы так, будто мы играем в теннис в космосе. Правильный выбор времени помогает вашей анимации выглядеть реалистично.
Вы можете легко настроить это с помощью свойства animation-duration, а также обозначить временные промежутки анимации, используя процентные значения.
Преувеличение
Мультфильмы известны преувеличением или невозможной физикой. Персонаж мультфильма может принять любую форму и при этом вернуться в нормальное состояние. В большинстве случаев преувеличение используется для акцентирования, чтобы оживить действие, которое в противном случае выглядело бы плоско.
Тем не менее используйте преувеличения умеренно. К примеру, у Disney было правило основывать свою анимацию на реальности, но "продвигать" её немного дальше. Представьте себе персонажа, врезающегося в стену: его тело врезалось в стену сильнее, чем ожидалось, чтобы подчеркнуть силу удара.
Мы используем преувеличение в сочетании со сквошем (сжатием) и стретчем (растягиванием), чтобы было заметно, когда мяч упадёт на пол. Я также добавил к анимации лёгкое колебание. Наконец, мы также растягиваем мяч, когда он подпрыгивает вверх и вниз, чтобы подчеркнуть скорость.
Так же, как когда мы добавляли одну анимацию к другой, здесь мы добавим еще один элемент div, который будет раскачиваться синхронно с ударом мяча об пол:
.ball-wobble {
/* Внешний вид мяча */
box-sizing: content-box;
position: relative;
width: 100px;
height: 50px;
background: #ecf0f3;
border-color: #141414;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
/* Примените к элементу анимацию колебания мяча. */
-webkit-animation: wobble 1s ease-out infinite alternate;
}
@-webkit-keyframes wobble {
0%, 24%, 54%, 74%, 86%, 96%, 100% {
-webkit-transform: scaleX(1.0);
/* Сделайте мяч нормального размера в этих точках. */
}
25%, 55%, 75% {
-webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px);
/* Точки падения на пол: эффект сквоша (сжатия) */
}
30%, 60%, 80% {
-webkit-transform: scaleX(0.8) scaleY(1.2);
/* Колебание внутрь после удара об пол */
}
75%, 87% {
-webkit-transform: scaleX(1.2);
/* Более тонкий сквош (сжатие) для последних нескольких отскоков */
}
97% {
-webkit-transform: scaleX(1.1);
/* Ещё более тонкий сквош (сжатие) для последнего отскока */
}
}Код выглядит сложнее, чем есть на самом деле. Это простой метод проб и ошибок. Продолжайте попытки, пока не добьётесь нужного эффекта!
Профессионализм и внешняя привлекательность
Мне больше нечего вам рассказать… по крайней мере, не о коде. Эти последние два принципа анимации невозможно отобразить в коде. Это навыки, которые вам придётся совершенствовать, чтобы создавать действительно впечатляющие анимации.
Когда Disney начала производство «Белоснежки», аниматоры вернулись к урокам рисования и снова изучили человеческую фигуру. Такое внимание к деталям очевидно в мультфильме, показывающем, что хорошая анимация требует хороших навыков рисования и хорошего знания формы, которую вы анимируете.
Большая часть анимации CSS, скорее всего, не будет такой сложной, как анимация сложных фигур, но основной принцип остается неизменным. Независимо от того, открывается ли дверь, чтобы показать контент, или конверт «Свяжитесь с нами» запечатывается и доставляется, анимация должна быть правдоподобной, а не роботизированной… если только вы не анимируете машину.
Привлекательность и харизма каждого персонажа должна быть уникальной. И, как всегда показывала Disney, персонажем может быть всё: чайник, дерево и даже ложки. Но при использовании CSS подумайте, как анимация повлияет на дизайн и сделает общее впечатление более приятным.
Идите анимировать!
CSS анимацию можно использовать, чтобы оживить веб-сайт. Хотя код нашего прыгающего мяча, возможно, не самый "семантический", мы надеемся, что он показывает, насколько просто можно оживить практически всё на веб-странице с помощью CSS.
Это может обеспечить столь необходимое взаимодействие с вашими элементами, добавить интересности странице, а в сочетании с JavaScript даже стать альтернативным способом анимации в играх. Приняв 12 вышеприведённых принципов и поработав над анимацией, вы сможете сделать свои веб-сайты более убедительными, заманчивыми и захватывающими, что приведёт к улучшению общего впечатления.
Итоговый листинг можно посмотреть на CodePen Ball Animation