Состояние анимации в CSS

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

CSS становится с годами более зрелым и не в последнюю очередь с точки зрения анимации. С каждым днём разработчики создают всё более живые интерфейсы. В этой статье мы рассмотрим состояние анимации в CSS, её прирост, сегодняшние возможности, охватим некоторые ресурсы и доступные инструменты. Вперёд!

Развитие

Анимация очень выросла, во многом благодаря transition и @keyframes дополнениям CSS. Были времена, когда анимация и CSS не были знакомы, сегодня это не так. Articles, tutorials, premium courses и даже motion guidelines сегодня более доступны, чем когда-либо. Комбинация @keyframes с возможностями animation , дополненные transition предоставили возможность обработать движение должным образом и оживить интерфейсы.

Part of Googles Material Motion Guidelines — From Google’s Material Motion Guidelines

Не было более захватывающего времени для анимации и интерактивного дизайна в CSS, чем сейчас!

Свойства анимации & Keyframes

Реализация свойства animation позволяет разработчикам управлять длительностью, временем, направлением, заливкой. Отсчёт времени доступен по функции steps() . Специальная функция синхронизации разбивает анимацию или переход на сегменты (например, полосу фильма), а не в виде непрерывного перехода из одного состояния в другое. Keyframes позволяют разработчикам движения объявлять позиции через from, to и даже в процентах анимации по значениям. Отличное начало и мы ещё это обсудим.

Свойство перехода

Затем славное свойство transition, такое же славное, как animation, которое позволяет управлять скоростью при изменении опций. Процесс перехода ещё называют implicit transition; промежуток между начальным состоянием и конечным, косвенно определяемым браузером. Переходам в настоящее время доступна настройка свойства, времени, продолжительности и задержки.

Видео вступление взято из Up and Running With CSS Transitions от Craig Campbell.

Чего не хватает?

Анимация CSS может быть мощной, но ей ещё не хватает особого аспекта, которого больше всего желают аниматоры: управления временной шкалой. Под этим я подразумеваю последовательности, на которые можно влиять и манипулировать ими по таймингу.

@keyframes move-object {
    from { starting position property and values }
    at 2s { do this }
    wait-until 4s { this happens }
    to { stop position property and values }
}

Такой syntax не существует, но рисует картину того, чего хотят специалисты по анимации. GreenSock, например, хорошо известен по этому типу sequencing, но, к сожалению, только в JavaScript. Было бы здорово иметь это в CSS? Думаю, да.

Видео взято с GreenSock Animation Platform: First Steps от Craig Campbell.

Есть возможность контроля за animation и transition через JavaScript для дальнейшего контроля за эпизодами. С помощью JavaScript разработчики могут обнаружить начало каждой новой итерации, когда происходит анимация, когда анимация заканчивается и то же самое для событий перехода.

Инспекция и инструменты для браузера

Наступили интересные времена для разработчика инструментов браузера, чтобы проверять и настраивать анимации CSS. Большинство браузеров (Firefox, Chrome) проверяют анимацию CSS с оглядкой на Safari и Edge. Слышал от моего источника в Microsoft, что проверка анимации - это то, что команда Microsoft действительно хочет сделать. Будем надеяться, что и для Safari.

Благодаря браузерам, которые поддерживают проверку анимации, у нас есть следующие возможности ...

Проверка временной шкалы, которую можно очистить.
Показ анимации применительно к ::before и ::after псевдоэлементам.
Настройка свойства keyframes и значений на лету.
Отчёты по keyframes именам.
Отображение свойств анимации.
Облегчение pickers и редакторов кривых bézier.
Цветовое кодирование, чтобы знать, является событие переходом, ключевым кадром или веб-анимацией.
Контроль и изменение скорости воспроизведения.

Хотя разработчикам есть что выбрать из приведённого выше списка, им по-прежнему требуется больше интерактивных инструментов для анимации. Это можно было бы назвать интерполяцией свойств, введением промежуточного значения в ряд путём вычисления его из окружающих известных значений; подобно тому, как вы переключаетесь на новое значение с переходами. Эти динамические/реактивные анимации могут начинаться в любое время и иметь переменную длительность, основанную на взаимодействии. Чего-то, что нельзя отлаживать или проверять с помощью инструмента разработчика, предоставляемого в это время браузером.

Будущее

Будущее для анимации в CSS выглядит ярко, с тенденцией к замедлению. CSS motion-path модуль, contain, will-change и prefers-reduced-motion запрос (ещё не стандартный, только WebKit) доступные опции для CSS аниматоров.

Путь движения CSS

Пути перемещения позволяют разработчикам анимировать любой графический объект по указанному пути автора. Вы можете определить путь очень похожим способом, определённым в SVG 1.1.

1	.my-element {
2	motion-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');
3	motion-offset: 0;
4	motion-rotation: reverse;
5	}

motion-path определяет путь, которым элемент будет следовать дальше. Наше motion-offset свойство - это размещение элемента где-то на пути. Свойство motion-rotation направление, в котором элемент “faces” по пути.

Проверьте эту коллекцию примеров на CodePen от Dan Wilson , который поставляет живые экземпляры motion-path .

My CSS Motion Path Demos от Dan Wilson
CSS Motion Path от Dan Wilson

Will Change

Опция will-change показывает авторам пути возможных изменений для элементов. Это позволяет браузеру заранее настроить оптимизацию, до того, как элементы изменятся.

1	.my-element {
2	will-change: transform;
3	}

Такая оптимизация может улучшить время загрузки и макет страницы, выполнив дорогостоящую работу до того, как она потребуется. При этом предполагается, что разработчики не применяют will-change ко многим элементам, поскольку могут потреблять ресурсы, замедляя работу.

Prefers Reduced Motion

Это дополнение к WebKit создаёт стили, которые избегают больших областей движения для пользователей, выбирающих замедленное движение в System Preferences.

@media (prefers-reduced-motion) {
  .my-element {
     animation: none;
  }
}

Это скорее ситуация доступности и фактического создания движения. Интересный, чтобы рассмотреть на досуге.

Contain

Этот CSS-модуль указывает на то, что subtree элемента не зависит от остальной части страницы, что позволяет использовать оптимизацию пользовательских агентов. Наиболее интересным для аниматоров CSS является значение paint, которое может быть передано.

1	.element-with-motion {
2	contain: paint;
3	}

Если элемент спрятан или затенён, браузер может сразу пропускать покраску его содержимого, поскольку они гарантированно будут за кадром или затенены. Это в конечном счёте обеспечивает быструю визуализацию конвейера во время начальной окраски. В настоящее время это пока рабочий проект в W3C.

Ресурсы

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

W3C Specs

Обучение

A Beginner’s Introduction to CSS Animation by Catalin Miron
9 Popular Courses on CSS Animation on Envato Tuts+
CSS Animation Rocks
How to read cubic-bezier curves by Val Head
An Introduction To CSS Keyframes Animation on Smashing Magazine
Web Animation Essentials: CSS Animations and Transitions by Rachel Nabors
Jank Free
Intro to CSS 3D transforms by David DeSandro
Using CSS, can I animate <CSS Property> ?
CSS Transitions and Animations. Motion Path Module CSS by Ruslan Homyak
The CSS Animations Pocket Guide by Val Head

Инструменты

stylie by Jeremy Kahn
animate.css by Daniel Eden
Material Components for the web
Easings by Andrey Sitnik
Animista by Ana Travas
WAIT! Animate by Will Stone
cssanimate.com CSS3 Keyframes Animation Generator
cubic-bezier.com by Lea Verou
cssreference.io бесплатный урок по CSS, от Jeremy Thomas
Motion UI from ZURB
magic CSS3 анимация и спецэффекты от Christian Pucci
Hover.css by Ian Lunn
CSSYNTH by Bennett Feely