Трансформационная анимация CSS3
19279
В предыдущих двух статьях мы говорили о преобразованиях CSS3 - двумерных и трёхмерных. С их помощью мы можем смещать, масштабировать, сдвигать и поворачивать любые элементы веб-страниц по любой из трёх координатных осей. Это может пригодиться, если мы пожелаем украсить веб-страницу графическими элементами, но не хотим при этом использовать обычные изображения или канву (canvas) HTML5.
Возможности CSS3 неизмеримы... Помимо преобразований (и ещё много чего полезного в веб-дизайне), они включают также инструменты для создания анимации. Причём эти инструменты не требуют никакого программирования, являются декларативными - то есть мы просто указываем параметры анимации, а браузер сам "думает", как эту анимацию реализовать.
И всё, что нам для этого понадобится, - браузер, любой простейший текстовый редактор (скажем, Блокнот, стандартно поставляющийся в комплекте Windows) и знания HTML и CSS. И никакого монструозного Flash или иных аналогичных пакетов!
В этой статье мы поговорим о создании на веб-страницах трансформационной анимации - простейшей её разновидности, тем не менее, позволяющей при должном старании создать весьма впечатляющие эффекты.
Анимация поддерживается Internet Explorer, начиная с версии 10.
1. Понятие трансформационной анимации
Трансформационная анимация (transition) формируется путём изменения значения какого-либо атрибута стиля или сразу нескольких в течение определённого времени. В результате этого достигается иллюзия движения элемента веб-страницы, плавного изменения его размеров, цвета, прозрачности или иных характеристик.
Для создания трансформационной анимации мы должны, прежде всего, указать атрибуты стиля, значения которых будут изменяться, начальные и конечные величины их значений и продолжительность анимации. Основываясь на этих сведениях, браузер сам рассчитает, на какие приращения должны изменяться значения указанных нами атрибутов стиля при каждом "шаге" анимации, и величину самого этого "шага".
Также мы можем указать задержку перед началом анимации и закон, по которому будут изменяться значения заданных нами "анимируемых" атрибутов стиля (линейный, с ускорением или замедлением, кривая Безье и др.). Это позволит нам придать анимированным элементам дополнительную "изюминку".
Трансформационная анимация создаётся с помощью двух стилей. Первый стиль задаёт начальные значения атрибутов стиля, которые следует анимировать (а также другие параметры элемента, относящиеся к его внешнему виду, а не самой анимации). Второй стиль укажет конечные значения этих атрибутов стиля, сами "анимируемые" атрибуты стиля, продолжительность анимации и, возможно, задержку и закон анимации.
Первый стиль привязывается к анимируемому элементу изначально. Чтобы запустить анимацию, мы привяжем к элементу второй стиль; сделать это можно либо декларативно, например, с помощью селектора :hover, либо программно, в коде логики.
Параметры анимации задаются с применением особых атрибутов стиля CSS3. Internet Explorer 10 и некоторые другие браузеры (в частности, последние версии Mozilla Firefox) поддерживает эти атрибуты стиля в том виде, в котором они определены в стандартах . Прочие браузеры, имеющие поддержку анимации, могут использовать для их задания расширения, которые получаются добавлением к наименованию атрибута стиля спереди префикса браузеры. Все эти префиксы были рассмотрены нами в конце первой статьи из данного цикла.
2. Создание трансформационной анимации
Теперь рассмотрим собственно создание трансформационной анимации, используемые для этого атрибуты стиля CSS3 и приёмы, которые могут нам пригодиться.
2.1. Простейшая анимация
В самом простом случае для создания анимации нам потребуется указать начальное и конечное значения "анимируемого" атрибута стиля, сам этот атрибут стиля и продолжительность анимации.
Начальное и конечные значения атрибута стиля указываются, соответственно, в первом и втором стиле, который привязывается к анимируемому элементу. За подробностями об этих атрибутах стиля обращайтесь в параграфу 1. Так что здесь нам, в принципе, всё знакомо.
#div1 {
background-color: white;
}
#div1:hover {
background-color: red;
}
Первый стиль будет применён к анимируемому элементу (у нас это блок div1) изначально. Второй - с селектором :hover - будет применён к этому элементу автоматически, при наведении на него курсора мыши. Именно после наведения на блок div1 курсора мыши и запустится наша анимация.
Атрибут стиля, значение которого будет изменяться для создания анимации, мы укажем с помощью атрибута стиля transition-property. В качестве его значения указывается наименование нужного атрибута стиля. Значение none данного атрибута стиля вообще отключает анимацию (это, кстати, его значение по умолчанию).
Атрибут стиля transition-property указывается во втором стиле.
#div1:hover {
transition-property: background-color;
}
Для создания нашей первой анимации мы будем анимировать фоновый цвет элемента, плавно изменяя его с белого на красный.
Наконец, продолжительность анимации задаётся с помощью атрибута стиля transition-duration. В качестве его значения указывается величина времени, для чего используются единицы измерения времени, поддерживаемые CSS3. Этих единиц две: секунды (обозначается символом s) и миллисекунды (ms).
#div1:hover {
transition-duration: 3s;
}
Пусть наша анимация длится три секунды.
Полный HTML-код, создающий анимированный элемент (за исключением служебных тегов), таков:
#div1 {
background-color: white;
}
#div1:hover {
background-color: red;
transition-property: background-color;
transition-duration: 3s;
}
. . .
<div id="div1">Блок</div>
e]
Мы увидим блок с белым фоном. Если мы наведём на него курсор мыши, то цвет блока плавно изменится на красный.
Отметим, что, когда мы уберём курсор мыши с блока, цвет его фона снова станет белым. То есть мы не должны специально возвращать анимированный элемент в его изначальное состояние - он сам примет это состояние без нашей помощи.
А теперь рассмотрим более сложный и эффектный пример.
#div1 {
float: left;
width: 100px;
background-color: yellow;
cursor: pointer;
}
#div1:hover {
transform: scaleX(4.0);
transform-origin: left center;
transition-property: transform;
transition-duration: 5s;
}
. . .
<div id="div1">Блок</div>
e]
Мы создали блок, задали для него жёлтый фоновый цвет (так он будет заметнее), сдвинули к левому краю родителя (без этого не удастся указать его ширину), задали для него ширину в 100 пикселов и для пущего эффекта установили форму курсора мыши в виде "указующего перста" - как у гиперссылок. При наведении курсора мыши этот блок будет плавно, в течение пяти секунд, растягиваться вправо (мы установили точку начала координат на его левый край), увеличивая свою ширину вчетверо.
Изначальное состояние этого блока показано на рис. 1, а состояние после завершения анимации - на рис. 2.
Рис. 1.
Рис. 2.
2.2. Создание обратной анимации
Оба созданных нами блока будут возвращаться в своё изначальное, бывшее до начала выполнения анимации, состояние автоматически - как только мы уберём с них курсор мыши. После этого второй стиль, заданный с применением селектора :hover, перестаёт на них действовать, и блок подпадает под действие первого стиля, как раз и задающего его изначальное состояние.
Вот только происходит это скачкообразно, в один момент. Нельзя ли и это анимировать?
Можно. Достаточно создать так называемую обратную анимацию и указать её параметры.
Если обычная анимация создаётся указанием её параметров во втором стиле, то логично предположить, что для создания обратной анимации нам следует указать её параметры в первом стиле. Так ли это? Давайте проверим.
#div1 {
float: left;
width: 100px;
background-color: yellow;
cursor: pointer;
transform: none;
transform-origin: left center;
transition-property: transform;
transition-duration: 1s;
}
Здесь мы дополнили первый стиль, указав отсутствие преобразований, точку начала координат на левой стороне блока, анимируемый атрибут стиля transform и продолжительность анимации, равную одной секунде.
Когда браузер загрузит страницу, наведём курсор на блок, подождём, пока анимация не закончится, и уберём курсор мыши с блока. Мы увидим, что он быстро, как раз в течении одной секунды, съёжится до своего изначального размера. Наша обратная анимация работает!
2.3. Сложная анимация
Мы можем также создать более сложную анимацию, в процессе которой изменяются значения двух или даже большего количества атрибутов стиля. Сделать это очень просто.
Для указания всех "анимируемых" атрибутов стиля мы перечислим их наименования в атрибуте стиля transition-property через запятую.
transition-property: color, font-size, font-weight, width, height;
Здесь мы создаём анимацию, которая затронет атрибуты стиля color, font-size, font-weight, width и height.
А чтобы "анимировать" все указанные во втором стиле атрибуты стиля, мы укажем в качестве значения атрибута стиля transition-property слово all.
Атрибут стиля transition-duration также поддерживает возможность указания сразу несколькх значений продолжительности анимации через запятую. Первое значение будет применено к первому из "анимируемых" атрибутов стиля, второе - к второму и т. д.
transition-duration: 2s, 4s, 1s, 3s, 5s;
Значение атрибута стиля color будет изменяться в течении двух секунд, значение атрибута стиля font-size - в течении четырёх и т. д.
Если в атрибуте стиля transition-duration указано меньше значений, чем атрибутов стиля в transition-property, набор указанных значений продолжительности будет повторяться столько раз, чтобы "покрыть" все указанные "анимируемые" атрибуты стилей.
transition-property: color, font-size, font-weight, width, height;
transition-duration: 2s, 4s;
В этом случае:
- значение атрибута стиля color будет изменяться в течении двух секунд;
- значение атрибута стиля font-size - в течении четырёх секунд;
- font-weight - двух секунд;
- width - четырёх;
- height - двух.
Если же указать в атрибуте стиля transition-duration большее количество значений, лишние значения будут проигнорированы.
body {
perspective: 300px;
}
#div1 {
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
background-color: blue;
cursor: pointer;
transform: none;
opacity: 1;
transition-property: transform, opacity;
transition-duration: 5s;
}
#div1:hover {
transform: translateZ(-400px) scale(0.1, 0.1) rotateY(360deg);
opacity: 0;
transition-property: transform, opacity;
transition-duration: 5s;
}
. . .
<div id="div1"></div>
Здесь мы создали пустой синий блок, который после наведения на него курсора мыши красиво "удалится" от нас, одновременно вращаясь, уменьшаясь в размерах и исчезая. Такого эффекта мы достигли, "анимируя" одновременно атрибуты стиля transform (преобразования CSS3; здесь мы указали смещение по оси z, уменьшение масштаба по горизонтали и вертикали и вращение вокруг вертикальной оси) и opacity (прозрачность элемента).
А вот более практичный пример - горизонтальное меню навигации:
.item {
float: left;
width: 80px;
height: 20px;
margin: 40px 10px 0px 10px;
padding-top: 0px;
background-color: yellow;
text-align: center;
cursor: pointer;
transition-property: margin, padding-top, background-color;
transition-duration: 2s;
}
.item a {
color: black;
text-decoration: none;
display: block;
transition-property: color;
transition-duration: 2s;
}
.item:hover {
margin: 20px 10px 0px 10px;
padding-top: 20px;
background-color: red;
transition-property: margin, padding-top, background-color;
transition-duration: 1s, 1s, 0.5s;
}
.item a:hover {
color: white;
text-decoration: none;
transition-property: color;
transition-duration: 0.5s;
}
. . .
<div class="item"><a href="#">Пункт 1</a></div>
<div class="item"><a href="#">Пункт 2</a></div>
<div class="item"><a href="#">Пункт 3</a></div>
<div class="item"><a href="#">Пункт 4</a></div>
<div class="item"><a href="#">Пункт 5</a></div>
/div>[/code]
Пять блоков с вложенными в них гиперссылками создают пункты данного меню. Гиперссылки мы превратили в блочные элементы, чтобы они заняли всё пространство блоков; для этого мы в соответствующем стиле задали значение block для атрибута стиля display. В остальном здесь всё должно быть знакомо для всех, знакомых с веб-дизайном.
На рис. 3 показано получившееся у нас меню. Курсор мыши наведён на его крайний левый пункт.
Рис. 3.
3. Дополнительные параметры анимации
Настала пора рассмотреть дополнительные параметры, которые мы можем задать для трансформационной анимации CSS3. Во многих случаях они могут быть нам полезны.
3.1. Задержка в выполнении анимации
Прежде всего, мы можем задать задержку перед началом анимации. Она указывается с помощью атрибута стиля transition-delay в любой из единиц измерения времени, поддерживаемых CSS3 (см. параграф 2.1).
[code]#div1:hover {
transition-delay: 0.5s;
}[/code]
Задаём полусекундную задержку перед началом анимации.
Если значение задержки не указано, анимация начнётся немедленно (что вполне логично).
Атрибут стиля transition-delay подчиняется тем же правилам, что и его "коллега" transition-duration. Так, мы можем указать сразу несколько величин задержки - каждое для своего из "анимируемых" атрибутов стиля; если указано меньшее количество значений, их набор будет повторяться, дабы "охватить" все указанные в transition-property атрибуты стиля.
[code].item:hover {
transition-delay: 1s, 1s, 0s;
}[/code]
Теперь анимация у пунктов нашего меню навигации начнётся с задержкой в одну секунду (для атрибутов стиля margin и padding-top) и немедленно (для атрибута стиля background-color).
3.2. Закон, или функция, анимации
Законом, или функцией, анимации в CSS3 называется закон (или функция), согласно которому выполняется изменение значений "анимируемых" атрибутов стиля во времени. Говоря другими словами, закон анимации определяет, как будет выполняться анимация: плавно, с ускорением, замедлением или как-то иначе
Для задания закона анимации применяется атрибут стиля transition-timing-function. В качестве его значения указывается одно из значений, перечисленных далее.
- ease - в начале скорость анимации слегка увеличивается, а в конце слегка уменьшается. Значение по умолчанию.
- linear - линейный закон. Анимация будет выполняться с постоянной скоростью.
- ease-in - в начале скорость анимации заметно увеличивается, после чего анимация выполняется с постоянной скоростью.
- ease-out - анимация выполняется с постоянной скоростью, а в конце её скорость заметно уменьшается.
- ease-in-out - в начале скорость анимации заметно увеличивается, а в конце заметно уменьшается.
- cubic-bezier - закон, подчиняющийся кубической кривой Безье. Записывается в формате:
[code]cubic-bezier(
<горизонтальная координата первой опорной точки>,
<вертикальная координата первой опорной точки>,
<горизонтальная координата второй опорной точки>,
<вертикальная координата второй опорной точки>
)[/code]
Все значения должны быть заданы в диапазоне между 0 и 1, где 0 - начало анимации, а 1 - её конец. Однако для всех атрибутов стиля, за исключением color и opacity, вертикальная координата может выходить за эти диапазоны; это может быть использовано для достижения эффекта "эластичной" анимации.
[code]transition-timing-function: cubic-bezier(0.1, 0.5, 0.9, 0.5);[/code] - steps - скачкообразный закон анимации, когда значение "анимируемого" атрибута стиля изменяется не плавно, а скачкообразно - в начале или конце одного из шагов анимации, количество которых задаём мы сами. Записывается в формате:
[code]steps(
<количество шагов анимации>,[
<в каком месте шага анимации выполняется изменение
значение "анимируемого" атрибута стиля>]
)[/code]
Первым значением задаётся количество шагов анимации - в виде числа без указания единицы измерения. Вторым значением указывается, в каком месте шага выполняется изменение значения "анимируемого" атрибута стиля: в его начале (значение start) или в конце (значение end). Если второй параметр не указан, он получит значение end.
[code]transition-timing-function: steps(5, start);[/code]
Анимация будет разбита на пять шагов-"скачков", причём значение "анимируемого" атрибута стиля будет изменяться в начале каждого шага.
- steps-start - "анимируемый" атрибут стиля сразу получит своё конечное значение, которое в дальнейшем не изменится. Эквивалентно указанию steps(1, start).
- steps-end - "анимируемый" атрибут стиля будет иметь своё начальное значение, которое в конце анимации мгновенно изменится на конечное. Эквивалентно указанию steps(1, end).
Атрибут стиля transition-timing-function подчиняется тем же правилам, что и атрибуты стиля transition-duration и transition-delay. Так, мы можем указать сразу несколько его значений, которые будут относиться к разным "анимируемым" атрибутам стиля.
[code].item:hover {
transition-timing-function: ease-in-out, ease-in-out, linear;
}[/code]
Задаём для "анимируемых" атрибутов стиля margin и padding-top элемента меню навигации закон ease-in-out, а для атрибута стиля background-color - линейный закон linear.
4. Задание сразу всех параметров анимации
А ещё мы можем указать все необходимые параметры трансформационной анимации в одном-единственном атрибуте стиля. Это атрибут стиля transition.
[code]transition: <"анимируемый" атрибут стиля> <продолжительность>
<закон анимации> <задержка перед началом анимации>[/code]
[code]#div1:hover {
background-color: red;
transition: background-color 3s ease 0s;
}[/code]
Здесь мы взяли второй по счёту пример, описанный в параграфе 2.1, и задали параметры анимации с помощью атрибута стиля transition.
Если нам нужно задать анимацию сразу для нескольких атрибутов стиля, мы укажем сразу несколько наборов "атрибут стиля - продолжительность - закон - задержка", каждый - для своего "анимируемого" атрибута стиля, перечислив их через запятую.
[code].item:hover {
margin: 20px 10px 0px 10px;
padding-top: 20px;
background-color: red;
transition: margin 1s ease-in-out 1s, padding-top 1s ease-in-out 1s,
background-color 0.5s linear 0s;
}[/code]
Здесь мы переписали фрагмент кода из примера - меню навигации с применением атрибута стиля transition.
5. Программное управление анимацией
Иногда приходится запускать и останавливать анимацию каких-либо элементов веб-страницы программно, из кода логики. Давайте выясним, как это делается.
Запустить или остановить анимацию проще простого. Для этого достаточно, соответственно, привязать к нужному элементу стилевой класс, задающий параметры анимации, и выполнить его "отвязку". Делается это присвоением наименования стиля свойству className, которое поддерживается всеми объектами, представляющими элементы Web-страницы. Нужно только помнить, что наименование стиля должно указывается в виде строки и без начальной точки.
[code]var div1 = document.getElementById("div1");
div1.className = "animated";[/code]
Запускаем анимацию, привязав к блоку div1 стилевой класс animated.
[code]div1.className = "";[/code]
Останавливаем анимацию, убрав привязку данного стилевого класса.
Все объекты, представляющие элементы Web-страницы, также поддерживают событие transitionend. Оно возникает по завершению анимации; отметим, что, если анимация была отменена, это событие не возникает.
В функцию-обработчик данного события в качестве единственного параметра передаётся экземпляр объекта TransitionEvent, хранящий дополнительные сведения о событии. Этот объект поддерживает два свойства, которые могут нам пригодиться.
- elapsedTime - хранит продолжительность анимации в виде числа в секундах. Эта продолжительность не включает величину задержки перед началом анимации, если таковая была задана.
- propertyName - хранит наименование "анимируемого" атрибута стиля.
Помимо этого, объект TransitionEvent поддерживает все свойства и методы объекта Event, от которого он, собственно, и порождён.
[code]div1.addEventListener("transitionend", function() {
. . .
});[/code]
Привязываем к событию transitionend блока div1 обработчик.
6. Заключение
Эта статья была посвящена реализации на веб-страницах трансформационной анимации CSS3. И хоть эта анимация очень проста - она выполняется изменением значения каких-либо атрибутов стиля в течение заданного времени, - с её помощью мы можем создать весьма впечатляющие эффекты, которые помогут заметно оживить наш веб-сайт.
Следующая статья будет посвящена покадровой анимации CSS3, более сложной в реализации, но и более богатой возможностями.
Дополнительные материалы
Февраль 2013
Комментарии
