Анимация в CSS3. Часть II

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

Кейфреймы. Расширенные настройки

Как мы помним из прошлой части данной статьи, любой кейфрейм создается при помощи @keyframes name, в фигурных скобках которых мы прописываем состояние конкретного элемента в определенное время. Производить данные настройки нам позволяют ключевые слова from и to, где и производятся любые другие изменения с нашим объектом.

Тем не менее, по мере возрастания сложности и требований к анимации, разработчикам не хватает стандартных возможностей css-команд from и to. Для этой цели консорциум ввел альтернативу: задавать кейфреймы не только ключевыми словами, но и в процентами. Что это значит? Ответ прост: мы можем управлять элементом на странице по мере выполнения анимации, в любой отрезок времени.

Чтобы все встало на свои места, давайте разберем небольшой пример. У нас есть кейфрейм, который перемещает элемент вправо с 50px на 450px, в добавок ко всему этому, наш "испытуемый" будет постепенно менять цвет с красного на фиолетовый (по цвету радуги(!)). Таким образом, наш кейфрейм будет выглядеть следующим образом:

@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>

Мы хотим сделать так, чтобы по наведению мыши на элемент .scene блок .blocker начал переходить влево с изменением цвета. Пишем код CSS:

.blocker {
  background-color: #000;
  width: 200px;
  left: 50px;
  height: 200px;
  position: relative;
}
.scene:hover > .blocker {
  animation-name: rainbow;
  animation-duration: 5s;
}

Демонстрация:

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

Временные функции

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

Разработчик, запомни! Общего между animation-timing-function и animation-duration ничего нет. Первое свойство задает, КАК будет вести себя элемент на странице, а второе - ДЛИТЕЛЬНОСТЬ всей анимации.

У animation-timing-function есть несколько параметров: linear, ease-in, ease-out, ease-in-out и cubic-bezier() (зачем у cubic-bezier нужны круглые скобки, я расскажу позднее).

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

Равномерное движение - такое движение, при котором тело за равные промежутки времени проходит одинаковое расстояние. Равномерному движению соответствует свойство linear.

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

Демонстрация linear:

Ускорение - величина, показывающая изменение скорости за конкретный промежуток времени.
Равноускоренное движение - движение тела с одинаковым ускорением в течение всего пути.

Равноускоренному движению соответсвуют параметры ease-in, ease-out и (частично) ease-in-out.

Значение ease-in говорит нам о том, что элемент будет двигаться все быстрее и быстрее (то есть двигаться равноускоренно) до тех пор, пока анимация не закончится (в данном случае он просто остановится).

Демонстрация ease-in:

А вот, значение ease-out по своему замыслу противоположно ease-in, ведь вместе с ним скорость элемента уменьшается до завершения анимации (опять же идет речь о равноускоренном движении).

Демонстрация ease-out:

Немного сложнее будет с ease-in-out. Его логика выполнения анимации такова: первую половину анимации выполнить с временной функцией ease-in, а второую половину с ease-out.

Демонстрация ease-in-out:

И, наконец, самый сложный параметр - cubic-bezier(). Он задает произвольное поведение элементу, и оно определяется значениями внутри скобок (а значениями являются координаты точек x1, y1, x2, y2).

А почему точки? Все дело в том, что элемент двигается в соответствии с кривой Безье, а кривая описывается при помощи этих самых точек. Как действует кривая Безье, советую подсмотреть на сайте http://cubic-bezier.com/ и визуально представить, как это работает.

А здесь я покажу пример со следующими координатами Безье: cubic-bezier(.03,1.28,.54,0).

Демонстрация cubic-bezier:

Выводы

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

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

В следующей статье я расскажу обо всех тонкостях настройки анимации и тема будет раскрыта полностью!

Удачных экспериментов!