CSS-анимации
CSS позволяет создавать простые анимации без использования JavaScript.
JavaScript может быть использован для управления такими CSS-анимациями. Это позволяет делать более сложные анимации, используя небольшие кусочки кода.
CSS-переходы
Идея CSS-переходов проста: мы указываем, что некоторое свойство должно быть анимировано, и как оно должно быть анимировано. А когда свойство меняется, браузер сам обработает это изменение и отрисует анимацию.
Всё что нам нужно, чтобы начать анимацию – это изменить свойство, а дальше браузер сделает плавный переход сам.
Например, CSS-код ниже анимирует трёх-секундное изменение background-color :
Теперь, если элементу присвоен класс .animated , любое изменение свойства background-color будет анимироваться в течение трёх секунд.
Нажмите кнопку ниже, чтобы анимировать фон:
Существует 4 свойства для описания CSS-переходов:
- transition-property – свойство перехода
- transition-duration – продолжительность перехода
- transition-timing-function – временная функция перехода
- transition-delay – задержка начала перехода
Далее мы рассмотрим их все, а сейчас ещё заметим, что есть также общее свойство transition , которое позволяет задать их одновременно в последовательности: property duration timing-function delay , а также анимировать несколько свойств одновременно.
Например, у этой кнопки анимируются два свойства color и font-size одновременно:
Теперь рассмотрим каждое свойство анимации по отдельности.
transition-property
В transition-property записывается список свойств, изменения которых необходимо анимировать, например: left , margin-left , height , color .
Анимировать можно не все свойства, но многие из них. Значение свойства all означает «анимируй все свойства».
transition-duration
В transition-duration можно определить, сколько времени займёт анимация. Время должно быть задано в формате времени CSS: в секундах s или миллисекундах ms .
transition-delay
В transition-delay можно определить задержку перед началом анимации. Например, если transition-delay: 1s , тогда анимация начнётся через 1 секунду после изменения свойства.
Отрицательные значения также допустимы. В таком случае анимация начнётся с середины. Например, если transition-duration равно 2s , а transition-delay – -1s , тогда анимация займёт одну секунду и начнётся с середины.
Здесь приведён пример анимации, сдвигающей цифры от 0 до 9 с использованием CSS-свойства transform со значением translate :
#digit < width: .5em; overflow: hidden; font: 32px monospace; cursor: pointer; >#stripe < display: inline-block >#stripe.animate
Кликните на цифру для начала анимации: Свойство transform анимируется следующим образом:
В примере выше JavaScript-код добавляет класс .animate к элементу, после чего начинается анимация:
stripe.classList.add('animate');Можно начать анимацию «с середины», с определённого числа, например, используя отрицательное значение transition-delay , соответствующие необходимому числу.
Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:
#digit < width: .5em; overflow: hidden; font: 32px monospace; cursor: pointer; >#stripe < display: inline-block >#stripe.animate
JavaScript делает это с помощью нескольких строк кода:
transition-timing-function
Временная функция описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот.
На первый взгляд это очень сложное свойство, но оно становится понятным, если уделить ему немного времени.
Это свойство может принимать два вида значений: кривую Безье или количество шагов. Давайте начнём с кривой Безье, как с наиболее часто используемой.
Кривая Безье
Временная функция может быть задана, как кривая Безье с 4 контрольными точками, удовлетворяющими условиям:
- Первая контрольная точка: (0,0) .
- Последняя контрольная точка: (1,1) .
- Для промежуточных точек значение x должно быть 0..1 , значение y может принимать любое значение.
Синтаксис для кривых Безье в CSS: cubic-bezier(x2, y2, x3, y3) . Нам необходимо задать только вторую и третью контрольные точки, потому что первая зафиксирована со значением (0,0) и четвёртая – (1,1) .
Временная функция описывает то, насколько быстро происходит анимации во времени.
- Ось x – это время: 0 – начальный момент, 1 – последний момент transition-duration .
- Ось y указывает на завершение процесса: 0 – начальное значение свойства, 1 – конечное значение.
Самым простым примером анимации является равномерная анимация с линейной скоростью. Она может быть задана с помощью кривой cubic-bezier(0, 0, 1, 1) .
Вот как выглядит эта «кривая»:
…Как мы видим, это прямая линия. Значению времени ( x ) соответствует значение завершённости анимации ( y ), которое равномерно изменяется от 0 к 1 .
В примере ниже поезд «едет» слева направо с одинаковой скоростью (нажмите на поезд):
В свойстве transition указана следующая кривая Безье:
…А как показать замедляющийся поезд?
Мы можем использовать другую кривую Безье: cubic-bezier(0.0, 0.5, 0.5 ,1.0) .
Как видим, анимация начинается быстро: кривая быстро поднимается вверх, и затем все медленнее и медленнее.
Ниже временная функция в действии (нажмите на поезд):
Есть несколько встроенных обозначений кривых Безье: linear , ease , ease-in , ease-out и ease-in-out .
linear это короткая запись для cubic-bezier(0, 0, 1, 1) – прямой линии, которую мы видели раньше.
Другие названия – это также сокращения для других cubic-bezier :
* – используется по умолчанию, если не задана другая временная функция.
Для того, чтобы замедлить поезд, мы можем использовать ease-out :
Но получившийся результат немного отличается.
Кривая Безье может заставить анимацию «выпрыгивать» за пределы диапазона.
Контрольные точки могут иметь любые значения по оси y : отрицательные или сколь угодно большие. В таком случае кривая Безье будет скакать очень высоко или очень низко, заставляя анимацию выходить за её нормальные пределы.
В приведённом ниже примере код анимации:
Свойство left будет анимироваться от 100px до 400px .
Но когда вы нажмёте на поезд, вы увидите следующее:
- Сначала, поезд поедет назад: left станет меньше, чем 100px .
- Затем он поедет вперёд, немного дальше, чем 400px .
- И затем вернётся назад в значение 400px .
Если мы взглянем на кривую Безье из примера, становится понятно поведение поезда.
Мы вынесли координату y для первой опорной точки ниже нуля и выше единицы для третьей опорной точки, поэтому кривая вышла за пределы «обычного» квадрата. Значения y вышли из «стандартного» диапазона 0..1 .
Как мы знаем, ось y измеряет «завершённость процесса анимации». Значение y = 0 соответствует начальному значению анимируемого свойства и y = 1 – конечному значению. Таким образом, y1 – больше конечного.
Это, конечно, «мягкий» вариант. Если значение y будут -99 и 99 , то поезд будет гораздо сильнее «выпрыгивать» за пределы.
Как сделать кривую Безье необходимую для конкретной задачи? Существует множество инструментов.
- К примеру, мы можем сделать это на сайте https://cubic-bezier.com.
- Браузернные инструменты разработчика также имеют специальную поддержку для создания кривых Безье в CSS:
- Откройте инструменты разработчика при помощи F12 (Mac: Cmd + Opt + I ).
- Выберете вкладку Elements , затем обратите внимание на под-панель Styles в правой стороне.
- Свойства CSS со словом cubic-bezier будут иметь иконку перед этим словом.
- Кликните по иконке, чтобы отредактировать кривую.
Шаги
Временная функция steps(количество шагов[, start/end]) позволяет разделить анимацию на шаги.
Давайте рассмотрим это на уже знакомом нам примере с цифрами.
Ниже представлен список цифр, без какой-либо анимации, который мы будем использовать в качестве основы: