В этой статье мы с вами побеседуем о том, как можно изменить поведение анимации с течением времени.
Кейфреймы. Расширенные настройки
Как мы помним из прошлой части данной статьи, любой кейфрейм создается при помощи
Тем не менее, по мере возрастания сложности и требований к анимации, разработчикам не хватает стандартных возможностей css-команд
Чтобы все встало на свои места, давайте разберем небольшой пример. У нас есть кейфрейм, который перемещает элемент вправо с
@keyframes rainbow{
0% /* Значения, принимающиеся в начале анимации, = from */ {
left: 50px;
background-color: #f00;
}
14% /* Значения, которые получает объект при выполнении 14% всей анимации*/ {
background-color: #f90;
}
28% {
background-color: #ff0;
}
42% {
background-color: #0f0;
}
56% {
background-color: #0ff;
}
70% {
background-color: #00f;
}
100% /*Значения, который получит объект при выполнении всей анимации. = to */ {
left: 450px;
background-color: #f0f;
}
}
Теперь, свяжем этот кейфрейм с нашими стилями. Пусть у нас имеется следующий код HTML:
<div class="scene">
<div class="blocker">
</div>
</div>
Мы хотим сделать так, чтобы по наведению мыши на элемент
.blocker {
background-color: #000;
width: 200px;
left: 50px;
height: 200px;
position: relative;
}
.scene:hover > .blocker {
animation-name: rainbow;
animation-duration: 5s;
}
Демонстрация:
На практике мы убедились, что задавать ключевые кадры при помощи процентных значений гораздо эффективней, нежели чем ограничиваться командами
Временные функции
Порой, необходимо сделать так, чтобы элемент на странице сначала двигался очень медленно, а затем неожиданно присвоил себе более высокую скорость движения. Произвести такую манипуляцию нам поможет свойство
Разработчик, запомни! Общего между animation-timing-function и animation-duration ничего нет. Первое свойство задает, КАК будет вести себя элемент на странице, а второе - ДЛИТЕЛЬНОСТЬ всей анимации.
У
Чтобы лучше понять, зачем нужны эти значения, давайте вспомним некоторые понятия из элементарной физики (главное, не пугайтесь).
Равномерное движение - такое движение, при котором тело за равные промежутки времени проходит одинаковое расстояние. Равномерному движению соответствует свойство
Действительно, если мы создадим анимацию движения и применим ее к элементу с временной функцией
Демонстрация linear:
Ускорение - величина, показывающая изменение скорости за конкретный промежуток времени.
Равноускоренное движение - движение тела с одинаковым ускорением в течение всего пути.
Равноускоренному движению соответсвуют параметры
Значение
Демонстрация ease-in:
А вот, значение
Демонстрация ease-out:
Немного сложнее будет с
Демонстрация ease-in-out:
И, наконец, самый сложный параметр -
А почему точки? Все дело в том, что элемент двигается в соответствии с кривой Безье, а кривая описывается при помощи этих самых точек. Как действует кривая Безье, советую подсмотреть на сайте
А здесь я покажу пример со следующими координатами Безье:
Демонстрация cubic-bezier:
Выводы
Эта статья дала нам понимание, каким образом мы можем гибко управлять анимацией в CSS3. Самое главное, что ничего сложного в этом процессе нет - нам понадобилось разобрать лишь несколько примеров, после чего, я думаю, каждый, кто прочитал этот пост, сможет написать свою не менее интересную анимацию на CSS3.
Если вы упустили какой-то момент или не совсем разобрались с темой кейфреймов, рекомендую пробежаться по первой части данной статьи. Уверен, она поможет.
В следующей статье я расскажу обо всех тонкостях настройки анимации и тема будет раскрыта полностью!
Удачных экспериментов!