В этой статье мы с вами побеседуем о том, как можно изменить поведение анимации с течением времени.
Кейфреймы. Расширенные настройки
Как мы помним из прошлой части данной статьи, любой кейфрейм создается при помощи , в фигурных скобках которых мы прописываем состояние конкретного элемента в определенное время. Производить данные настройки нам позволяют ключевые слова и , где и производятся любые другие изменения с нашим объектом.
Тем не менее, по мере возрастания сложности и требований к анимации, разработчикам не хватает стандартных возможностей css-команд и . Для этой цели консорциум ввел альтернативу: задавать кейфреймы не только ключевыми словами, но и в процентами. Что это значит? Ответ прост: мы можем управлять элементом на странице по мере выполнения анимации, в любой отрезок времени.
Чтобы все встало на свои места, давайте разберем небольшой пример. У нас есть кейфрейм, который перемещает элемент вправо с на , в добавок ко всему этому, наш "испытуемый" будет постепенно менять цвет с красного на фиолетовый (по цвету радуги(!)). Таким образом, наш кейфрейм будет выглядеть следующим образом:
Теперь, свяжем этот кейфрейм с нашими стилями. Пусть у нас имеется следующий код HTML:
Мы хотим сделать так, чтобы по наведению мыши на элемент блок начал переходить влево с изменением цвета. Пишем код CSS:
Демонстрация:
На практике мы убедились, что задавать ключевые кадры при помощи процентных значений гораздо эффективней, нежели чем ограничиваться командами и .
Временные функции
Порой, необходимо сделать так, чтобы элемент на странице сначала двигался очень медленно, а затем неожиданно присвоил себе более высокую скорость движения. Произвести такую манипуляцию нам поможет свойство
Разработчик, запомни! Общего между animation-timing-function и animation-duration ничего нет. Первое свойство задает, КАК будет вести себя элемент на странице, а второе - ДЛИТЕЛЬНОСТЬ всей анимации.
У есть несколько параметров: , , , и (зачем у cubic-bezier нужны круглые скобки, я расскажу позднее).
Чтобы лучше понять, зачем нужны эти значения, давайте вспомним некоторые понятия из элементарной физики (главное, не пугайтесь).
Равномерное движение - такое движение, при котором тело за равные промежутки времени проходит одинаковое расстояние. Равномерному движению соответствует свойство .
Действительно, если мы создадим анимацию движения и применим ее к элементу с временной функцией , то данный объект будет двигаться плавно, равномерно.
Демонстрация linear:
Ускорение - величина, показывающая изменение скорости за конкретный промежуток времени. Равноускоренное движение - движение тела с одинаковым ускорением в течение всего пути.
Равноускоренному движению соответсвуют параметры , и (частично) .
Значение говорит нам о том, что элемент будет двигаться все быстрее и быстрее (то есть двигаться равноускоренно) до тех пор, пока анимация не закончится (в данном случае он просто остановится).
Демонстрация ease-in:
А вот, значение по своему замыслу противоположно , ведь вместе с ним скорость элемента уменьшается до завершения анимации (опять же идет речь о равноускоренном движении).
Демонстрация ease-out:
Немного сложнее будет с . Его логика выполнения анимации такова: первую половину анимации выполнить с временной функцией , а второую половину с .
Демонстрация ease-in-out:
И, наконец, самый сложный параметр - . Он задает произвольное поведение элементу, и оно определяется значениями внутри скобок (а значениями являются координаты точек x1, y1, x2, y2).
А почему точки? Все дело в том, что элемент двигается в соответствии с кривой Безье, а кривая описывается при помощи этих самых точек. Как действует кривая Безье, советую подсмотреть на сайте и визуально представить, как это работает.
А здесь я покажу пример со следующими координатами Безье: .
Демонстрация cubic-bezier:
Выводы
Эта статья дала нам понимание, каким образом мы можем гибко управлять анимацией в CSS3. Самое главное, что ничего сложного в этом процессе нет - нам понадобилось разобрать лишь несколько примеров, после чего, я думаю, каждый, кто прочитал этот пост, сможет написать свою не менее интересную анимацию на CSS3.
Если вы упустили какой-то момент или не совсем разобрались с темой кейфреймов, рекомендую пробежаться по первой части данной статьи. Уверен, она поможет.
В следующей статье я расскажу обо всех тонкостях настройки анимации и тема будет раскрыта полностью!
Удачных экспериментов!