Как описывать анимацию
Введение в CSS3 для дизайнера
Презентация идеи с помощью gif или видео не экономит ресурсы команды. Разработчику, получившему от вас такую «инструкцию», предстоит большая работа: как рассчитать общую продолжительность и временные промежутки на переходы, какие функции и свойства наиболее точно опишут плавность анимации? С таким заданием программисту придется запастись секундомером и умением определять движения на глаз. И не нужно потом удивляться результату.
CSS3-анимация для дизайнера: Пошаговая анимация кнопки
Хороший пример
Программисты пишут анимацию на CSS3 и JavaScript. Выбрать очень просто: все, что можно сделать синтаксисом CSS — делается синтаксисом CSS. С точки зрения производительности выигрывает CSS, вот почему простая анимация, требующая привязки к скроллу, пишется на CSS, а сама привязка делается средствами JS.

Научиться описывать анимацию свойствами CSS значит найти общий язык с разработчиком и получить ожидаемый результат в конце.

Дмитрий Быков из Яндекса показал свой способ текстового описания анимации синтаксисом CSS3 и выглядит это так:

«Текстовое описание анимации для скрытия поиска при потере фокуса:
0 ms Иконка стрелки пропадает (ease-out quad, cubic-bezier (0.25, 0.46, 0.45, 0.94), 200 ms)
65 ms Контейнер строки уменьшается (easy-in-out, 135 ms)
200 ms иконка микрофона и баркода появляются сразу»
Как это читать?
Начнем с простого. Левая колонка — это «ключевые кадры» анимации: моменты времени, когда появляются элементы. Время справа — продолжительность анимации элемента. Общее время всей анимации в примере 200 миллисекунд. Иконка стрелки пропадает на протяжении всей анимации. Уменьшение контейнера начинается на 65ой миллисекунде и заканчивается на последней секунде анимации. В конце появляются две новые иконки.

Но что такое ease-out quad или easy-in-out, а cubic-bezier с координатами?

Временные функции и кривые Безье
Каждый дизайнер знает, что такое кривые Безье в графических редакторах. Значение cubic-bezier (0.25, 0.46, 0.45, 0.94) в примере — это кривая Безье в CSS3-анимации, с координатами в четырех точках, описывающих тип ускорения на временной шкале. Именно это значение определяет плавность анимации.
Значение easy-in-out — входит в пятерку «предустановленных» значений: ease, ease-in, ease-out, ease-in-out и linear. Это короткая запись координат кривой Безье, позволяющая написать название без указания самих координат. Значение ease-out quad не поддерживается синтаксисом CSS3, поэтому дополнительно требуется указать координаты.
easings.net – шпаргалка с часто используемыми функциями и их координатами
cubic-bezier.com - помогает создать координаты для кривой Безье
Разбор этого примера уже сейчас позволит дизайнеру описывать простейшую анимацию в интерфейсе и здорово сэкономит время разработки.

Чтобы выйти на новый уровень, нужно не бояться писать CSS3-анимацию самостоятельно. Это не так сложно, хоть и потребует базовых знаний структуры веб-страниц, синтаксиса языков разметки HTML и CSS.

Но, если вы думаете «В начале надо пройти курс по верстке, выучить все теги и селекторы…» — вы никогда не доберетесь до анимации.

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

Полезные ссылки
CSS 3 Timing Functions – можно скинуть разработчикам, если они никогда не слышали о кривых Безье при определении значений свойства timing-function

easings.net – шпаргалка с часто используемыми функциями и их координатами

cubic-bezier.com - помогает создать координаты для кривой Безье

Это было полезно?