Советы, библиотеки и дополнительные материалы по CSS-анимации

Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки. … С того дня в моей голове засела мысль: "Я так и не посмотрел Deadpool пора уже структурировать эту информацию и рассказать о ней людям". Поэтому во время работы над облачной IDE «mr. Gefest», я выделил несколько вечеров (оказалось далеко не несколько) для написания статьи, которую теперь Вы читаете.

В ней Вы узнаете, что такое css-анимация, какие существуют библиотеки (css/js), получите список готовых решений с других сайтов и узнаете о новой технологии web-анимации.

CSS-анимация — это изумруд веб-технологий для оживления Ваших сайтов. При помощи неё можно создать красивые и плавные переходы (смена цвета, изменение размеров и так далее) у объектов без применения JavaScript.

Он состоит из CSS-Transitions и CSS-Animations.

Transitions позволяет управлять скоростью анимации при изменении css-свойств. Animations предоставляет возможность создавать более сложные анимации с несколькими промежуточными переходами.

При создании эффектов часто используют CSS-Transforms и content pseudo-elements (псевдоэлементы).

Transforms дает возможность масштабировать, вращать, сдвигать и наклонять DOM-элемент. Content pseudo-elements after и before позволяют добавлять содержимое (через css) до и после элемента без изменения html.

; ; ; ; ; ; ; ; ; ;

; ; ; .

;
• Ваши варианты в комментариях.

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

Бывает откроешь блок с поиском, а там поле, заголовок и кнопка по-разному анимируется с разной скоростью. Будто мультик в интерфейсе. Это создает дискомфорт и неудобство.

Кроме того, при использовании большого количества анимации браузер может начать тормозить, даже если будет обрабатывать их отдельно в GPU.

При изменении css-свойств браузер проходит через 4 этапа отображения DOM: recalculate style, layout, paint, composite.

Вычисление стилей (recalculate style) — анализируется все CSS-правила и вычисления итогового style для каждого DOM-элемента.

Перерасчет макета (layout) — определение положения элементов на экране, их размеров и других первичных данных.

Прорисовка (paint) — вывод всех визуальных частей элементов (цвет, размер текста, шрифт, изображение, тень и так далее).

Компоновка (composite) — собираются все прорисованные элементы в единую композицию.

Вычисление стилей, перерасчет макета(layout) и прорисовка(paint) потребляют гораздо больше ресурсов, чем composite (компоновка).

Например, для css-свойства "transform: translate" создается дополнительный, невидимый слой, в котором происходят все изменения. Он обрабатывается на этапе компоновки (в невидимом дополнительном слое без сдвига соседних элементов) и выполняется в GPU, а не в CPU. За счет использования GPU, изменения происходят плавно без задержек. Вы можете увидеть это на видео.

Использование GPU вместо CPU во время выполнения анимации особенно эффективно на телефонах и планшетах, где ресурсы центрального процесса ограничены.

Одни css-свойства проходят через 4 этапа отображения, другие через один или два. Необходимо их знать и грамотно применять в анимации. Например, при изменении «Height» какого-то DOM-объекта браузеру придется пройти через recalculate style, layout, paint и composite, потому что из-за него могут сдвинуться другие элементы страницы, а значит для каждого из них тоже необходимо сделать перерасчет позиции, размеров и других параметров.

• transform: rotate;
• transform: scale;
• transform: translate;
• opacity;
• color.

; ; ; ; ; ; ; .

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

• auto — действия браузера по умолчанию/сбрасывает принудительную оптимизацию;
• scroll-position — ожидает анимацию/изменение полосы прокрутки конкретного элемента;
• contents — ожидает анимацию/изменение в контенте конкретного элемента;
• custom-ident — перечисление css-свойств через запятую.

То браузер заранее постарается оптимизировать анимацию для ".text".

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

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

• Chrome 36+;
• Firefox 36+;
• Opera 26+;
• Android 36+;
• Safari, IE, iOS — нет (на 22 марта).

; ; ; .

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

Так делать нельзя:

Почему? Если Вы читали прошлые советы, то узнали, что при выводе данных на экран, браузер проходит через 4 этапа отображения: вычисления стилей, расчета макета, прорисовки и компоновки.

В плохом примере два раза происходит принудительный перерасчет макета в строчках "var b3W=b3.offsetWidth;" и "var b3W=b3.offsetWidth;", потому что до этого было изменено css-свойство (left). Без пересчёта браузер просто не сможет точно определить «offsetWidth», потому что есть вероятность, что новое значение css-свойства повлияло на него.

Пожалуйста, группируйте операции чтения и обновления!

Странно, но за все это время мне не попадался материал о тестировании анимации в браузере. А ведь эта тема достойна отдельной статьи.

При помощи инструментов разработчиков в браузерах можно найти ресурсоемкие операции анимации, которые следовало бы исправить. Поэтому тестируйте анимацию при помощи них!

В этом совете я кратко опишу возможности нескольких браузеров для тестирования анимации.

• Временная шкала с операциями отображения;
• Графические слепки сайта (скриншоты) для каждого шага;
• Подробный список этапов отображения;
• Общее время работы на каждом шаге;
• Подробное описание каждого этапа;
• Профилирование процесса отрисовки;
• И другие мелкие возможности.

В Safari анимация оценивается через вкладку «Шкала времени» раздела «Макет и рендеринг».

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

В Safari откладка анимации мне показалась мало информативна. Нет советов по его улучшению в отличие от Google Chrome.

Для тестирования анимации он подходит меньше всего. Есть временная шкала со всеми шагами по анимации и блоком их очередности. Подробная информация о этапах отсутствует.

Firefox больше подходит для тестирования процесса разбора html и работы сайта (выполненные операции сборщика мусора, разбор html/xml, редукция CC Graph и так далее).

• Если страница находится в неактивной вкладке, то она все равно будет работать и тратить ресурсы компьютера;
• Функция требует перерисовку экрана не в то же время, когда это требует компьютер. Поэтому устройству/ПК приходится использовать дополнительные ресурсы для синхронизации анимации с частотой обновлений экрана;
• Анимация может поддёргиваться, так как js — однопоточный и в тот момент, когда должна произойти анимация, может выполняться другая операция,

• В неактивных вкладках анимация останавливается для экономии ресурсов компьютера (памяти, CPU, GPU и расход батареи);
• Скорость прорисовки (repaint) подстраивается под частоту обновления экрана и выполняется только тогда, когда компьютер к этому готов;
• Уменьшает FPS при сильных нагрузках для экономии батареи и ресурсов компьютера;
• Все анимации объединяются в одну браузерную перерисовку (а не выполняет по отдельности) — это уменьшает потребление ресурсов и ускоряет отображение.

• В разных браузерах используется разный API (решается через polyfill);
• Сложно контролировать FPS анимации (только при помощи «костылей»);
• Не все браузеры поддерживают новую технологию, из-за чего в старых версиях используется все тот же setInterval (IE10+);
• Все вычисления надо делать за 16.7 mc (этого может не хватить).

; ; ; ; ; ; ; .

У каждого типа библиотеки есть недостатки и преимущества. Их стоит учитывать при выборе.

• Удобно разрабатывать простые анимации;
• Некоторые свойства сразу выполняются в GPU;
• Не нужно утяжелять сайт js-кодом.

• Трудно создавать и поддерживать сложные анимации;
• Недостаточный контроль над процессом анимации и его появлением (например, включить при клике или остановить на конкретной секунде выполнения).

• Можно создать анимацию любой сложности;
• Присутствуют механизмы контроля анимации (включать/выключать, останавливать на конкретной секунде и так далее);
• В некоторых случаях применимы не только к css, но и к SVG и canvas;
• Иногда быстрее css-библиотек;
• Разнообразные easing function (с 2-мя и более точками кривых).

• Увеличивает размер сайта;
• Избыточен для простых анимаций;
• Сложен для изучения.

Теперь перейдем к изучению css- и js-библиотек.

• Отскок;
• Тряска;
• Качели;
• Желе;
• Медленное исчезновение/появление;
• Кувырок;
• Поворот;
• Скольжение;
• и другие.

Библиотека с 75 эффектами. Существует с 2011 года. До 2013-14 года предоставляла online-конструктор эффектов. Позже разработчики его убрали и сделали build-генератор при помощи Gulp.js. Все эффекты используют @keyframes.

Его удобно применять на продающих страницах.

• Attention Seekers;
• Bouncing Entrances;
• Bouncing Exits;
• Fading Entrances;
• Fading Exits;
• Flippers;
• Lightspeed;
• Rotating Entrances;
• Rotating Exits;
• Sliding Entrances;
• Sliding Exits;
• Zoom Entrances;
• Zoom Exits;
• Specials.

Effeckt.css появился в 2013 году. При помощи него можно быстро создать красивую анимацию для появления диалогового окна, переключения вкладок, добавления элементов и много другого.

• 34 эффекта для диалоговых окон;
• 23 эффекта для появления информационного блока возле конкретного элемента;
• 20 эффектов для наложения на кнопки каких-либо данных (иконки, текст и другое);
• 8 эффектов появления/исчезновения элементов списка;
• 8 эффектов прокручивания элементов списка;
• 27 эффектов появления/исчезновения навигационной панели (мобильной панели);
• 15 эффектов перехода между страницами;
• 18 эффектов появления дополнительной информации в карточке с изображениям (или, например, для галереи картинок);
• 4 простых эффекта появления подсказки;
• 4 эффекта для переключателей;
• 7 эффектов для вкладок.

Библиотека для создания эффектов, которые будут срабатывать при наведении курсора мыши на элемент. Его удобно применять для кнопок.

• 27 эффектов 2D трансформации;
• 18 эффектов изменения фона элемента;
• 27 эффекта для элемента с текстом и иконкой;
• 18 эффектов Border transitions;
• 7 эффекта с тенью;
• 8 эффектов появления треугольника (как в подсказке);
• 4 эффекта загибания уголка.

• Магические;
• Bling;
• Статичные эффекты;
• 3D-перспективы;
• 3D-повороты;
• Slide;
• Со сложным движением;
• С эффектом взрыва;
• Пространственные;
• и другие.

• Fade;
• Slide;
• Bounce;
• Roll;
• Rotbo;
• Flip;
• Rotate;
• Turn;
• Back;
• Push;
• Clip;
• Else.

• Slide from right;
• Slide from left;
• Slide from top;
• Slide from bottom;
• Slide from right bottom;
• Slide from right top;
• Slide from left bottom;
• Slide from left top;
• Slide left right;
• Slide top bottom.

• Bounce;
• Perspective;
• Fading Entrances;
• Rotate;
• Agreccives;
• Legend;
• Portrait.

Анимационная библиотека из 27 готовых эффектов. Построена на Rebound.js от facebook.

Позволяет сгенерировать css-анимацию при помощи json-объекта и скрипта reboundGet.js. Это удобно, ведь можно создать свои эффекты при помощи скрипта, а на сайте уже потом подключить только css без js.

Из-за готовых css-эффектов и механизма генерации, я решил включить библиотеку не в javascript-список, а в css.

Morphodynamics — это библиотека для создания красивых эффектов. Предоставляет 47 вариантов анимаций.

• Miscellaneous;
• Background;
• Border Transitions;
• Shadow Transitions;
• 2D Transforms;
• Bubbles.

Изначальный код написан на less.

Простая библиотека для создания анимаций.

• Bounce;
• growIn;
• FadeIn;
• Shake;
• RotateIn;
• RollIn;
• Wiggle;
• И другие.

• SlideUp;
• Slide Down;
• Slide Left;
• Slide Right;
• Slide Expand Up;
• Expand Up;
• Fade In;
• Expand Open;
• Big Entrance;
• Hatch;
• И другие.

Как и во многих библиотеках, в ней используются CSS3 @keyframes.

• FadeIn;
• FadeOut;
• Expand;
• Stamp;
• Shrink;
• Swing;
• DropIn;
• Plop;
• HingeFlip.

Как Вы понимаете, css — это декларативный язык. Вся его анимация линейна и не меняется в зависимости от ситуации. Поэтому на чистом css нельзя сделать нормальную анимационную логику.

Javascript-библиотеки расширяют возможности и убирают ограничения css-решений. При помощи них можно создавать анимацию в зависимости от состояний (один эффект закончился, другой начался; пользователь нажал на кнопку, что-то появилось и так далее).

Благодаря js-решениям можно точно сказать, куда будет перемещен объект на 3-ей секунде. В css достичь такого нельзя, так как все шаги определяются процентами, а не секундами. Можно только примерно узнать, куда объект будет перемещен. Если клиент захочет изменить анимацию, то придется снова все пересчитывать (при создании соответствий между процентом и возможной секундой), а это дополнительная трата времени.

Css-анимация не всегда работает быстрее js-решений (даже когда вычисления проходят в GPU). Об этом рассказано в статье от Css-trick (потерял ссылку, ищю).

Существующие библиотеки можно разделить по типу применения (стандартная анимация и узкоспециализированная) и их сложности (простые и сложные).

• Menu;
• Grid;
• Add/remove;
• Mail;
• Scroll indicators;
• Forms;
• Video;
• Loaders.

Библиотека для создания анимации. Обладает простым и понятным API. Занимает всего 5kb. Используют 3dmatrix. Заявлено 60 FPS. Можно делать несколько анимаций подряд через цепочку вызовов функций (как в jQuery).

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

• linear(default);
• ease;
• easeIn;
• easeOut;
• spring.

Ещё одна библиотека без зависимостей. При помощи неё можно делать не только производительную трансформацию, но и изменение стандартных свойств объектов (цвет фона, размер бордюра и так далее). Весит 13-14 кb.

• in;
• out;
• in-out;
• snap;
• linear;
• ease-in-quad;
• ease-in-cubic;
• ease-in-quart;
• ease-in-quint;
• ease-in-sine;
• ease-out-quad;
• ease-out-cubic;
• ease-out-quart;
• ease-out-quint;
• ease-out-sine;
• и так далее.

Разработанная в 2013 году библиотека для создания анимации. Используется как плагин к jQuery 2+. Является оберткой над Animate.css.

• Анимация (можно несколько);
• Время выполнения анимации;
• Количество повторений (один раз, два раза или бесконечно);
• Callback функция, вызываемая после завершения анимации (в ней можно снова обратится к Animo.js);
• Уникальные свойства для конкретных эффектов (градус поворота, сила размытия и так далее);
• Timing-функция.

Библиотека с необычным способом использования. Вместо стандартного указания классов или вызовов функций javascript, нужно прописать дата-атрибут (data-anijs) и внести в него что-то вроде этого:

if: click, on: h1, do: pulse animated, to: h2

• if — любое событие;
• on — объект, к которому будет применяться анимация;
• do — эффект (можно несколько);
• to — объект на котором будет срабатывать событие (on и to могут иметь и разное, и одинаковое значение).

• attention_seekers;
• bouncing_entrances;
• bouncing_exits;
• fading_entrances;
• fading_exits;
• flippers;
• lightspeed;
• rotating;
• rotating_entrances;
• rotating_exits;
• specials;
• zooming_entrances;
• zooming_exits;
• sliding_entrances;
• sliding_exits.

Библиотека для создания производительных анимационных эффектов. Можно использовать как плагин к jQuery. Поддерживает ie8+ и современные браузеры на компьютерах, телефонах и планшетах.

• Автоматически собирает операции чтения и записи в пакеты;
• Применяет requestAnimationFrame;
• Использует производительные css-свойства и лучшее методы кеширования конечных значений анимации.

Небольшая библиотека для создания анимации (7 kb). Поддерживает Chrome, Safari, Firefox, Internet Explorer 10 и мобильные браузеры. Для эффектов используется только opacity и 2D/3D трансформация, так как это одни из самых производительных css-свойств.

• Эффект (translate, rotate, scale and opacity);
• Время выполнения;
• Easing function (25 типов);
• Задержку.

В Animo.js можно управлять анимацией: останавливать, ставить паузу и возобновлять.

Плагин к jQuery для создания анимации. Использует производительные css-свойства для высоких FPS и позволяет применять неэффективные (не рекомендуется).

• x (px) — изменение координат по оси X;
• y (px) — изменение координат по оси Y;
• translate (x, y) — изменение координат по двум осям;
• rotate (deg) — поворот;
• rotateX (deg) — поворот по оси X;
• rotateY (deg) — поворот по оси Y;
• rotate3d (x, y, z, deg) — 3D поворот;
• scale (x, [y]) — уменьшение/увеличение элемента;
• perspective (px) — создание эффекта перспективы;
• skewX (deg) — наклон по оси X;
• skewY (deg) — наклон по оси Y.

Плагин можно использовать в цепочке вызовов (.transition().transition().transition(). ).

Анимационная библиотека от создателей css-фреймворка «Foundation».

• Slide;
• Scale;
• Hinge;
• Fade;
• Spin.

• data-animation — эффект;
• data-delay — задержка;
• data-duration — время выполнения.

Небольшая (2.8 kb) библиотека для создании css/svg анимации без зависимостей.

• translateX, translateY, translateZ;
• scale, scaleX, scaleY, scaleZ;
• rotate, rotateX, rotateY, rotateZ;
• skewX, skewY;
• opacity;
• perspective.

• el — анимированный элемент;
• duration — время выполнения анимации;
• delay — задержка перед началом анимации;
• easing — временная функция (29 вариантов);
• loop — для зацикливания анимации;
• direction — направление (normal, reverse, alternate);
• begin — функция выполняющаяся перед началом анимации;
• complite — функция выполняющаяся после завершения анимации.

• TweenMax — основной модуль для создания анимации с множеством дополнительных функций;
• TweenLite — облегченный TweenMax;
• TimeLineMax — модуль для создания и управления последовательностью анимаций;
• TimeLineLite — упрощённая версия TimeLineMax.

Первоначально он разрабатывался для flash, но потом его перенесли на web-технологии.

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

В бесплатной версии нельзя использовать большинство плагинов.

Такой подход разработчиков можно понять, ведь этот проект — их ежедневная работа.

Библиотека, в которой анимация создается только через javascript. В отличие от прошлого решения он бесплатен.

• Samsara.DOM.Surface — объект для анимации;
• Samsara.DOM.Context — объект, куда добавляются все Surface;
• Samsara.Core.Transitionable — позволяет изменять значения (свойства) Surface-объектов с течением времени;
• Samsara.Core.Transform — применение css-transform свойств (например, вместе с Transitionable);
• MouseInput — реакция на движение мышки;
• TouchInput — реакция на прикосновение к экрану;
• ScrollInput — реакция на scroll-движение;
• PinchInput — реакция на нажатие двумя пальцами по экрану;
• RotateInput — реакция на вращения двумя пальцами по экрану;
• ScaleInput — реакция на увеличение/уменьшение расстояния между двумя пальцами на экране.

• linear;
• easeIn;
• easeOut;
• easeInOut;
• easeOutBounce;
• easeInCubic;
• easeOutCubic;
• easeInOutCubic;
• easeOutWall.

Popmotion — это библиотека для создания физически реалистичной анимации.

• Standart;
• Actions;
• Roles;
• Primitives;
• Plugins.

• ui — ядро библиотеки;
• Actor — анимированный элемент;
• Iterator — используется для запуска методов и обратных вызовов по нескольким элементам;
• Sequence — класс для создания более точной последовательности анимации;
• calc — функции расчета.

• Simulate — симуляция физики;
• Track — отслеживание событий мыши при активности конкретного элемента;
• Tween — создание плавной анимации конкретных актеров (Actor).

• css — для получения и изменения css-свойств;
• attr — для получения и изменения атрибутов;
• svg — позволяет манипулировать элементами svg объектов;
• drawPath — дает возможность анимировать изменения элементов svg объектов.

• Action — создание конкретных действий для изменения значений (Tween/Simulate/Track) у актеров (Actor);
• Easing — генератор временных функций;
• Input — интерфейс для Actor, чтобы отслеживать входные данные;
• Process — для покадровой синхронизации визуального цикла;
• Role — позволяет актерам (Actor) автоматически выводить значения к различным элементам (css, attr и так далее).

• Scroll To — прокрутка окна браузера и отдельных DOM-элементов.

Очень интересная библиотека для создания анимации у DOM-элементов. Её изюминка состоит в том, что кривые (easing functions) задаются через svg-линии, а не математические выражения и css-определения.

Как вы знаете, при помощи css можно создать easing functions только с двумя точками изменения (и искривления по ним). Но что делать, если нужно определить движение из 5 точек для имитации движения объекта из реального мира? Создавать «костыли», которые превращают код в сложное, большое и непонятное «чудо»?

Mo.js решил эту проблему изящным способом. Временные функции изображаются svg-линиями. Они могут быть из любого количества искривлений. Библиотека на входе принимает svg код/файл и создает все необходимые изменения. Это позволяет создавать по-настоящему реалистичную физику объектов из реального мира.

В одной Tween-функции Mo.js можно подключить сразу несколько эффектов на несколько элементов. При этом имеется возможность указывать на разные свойства — разные кривые. Это дает шанс создавать удивляющие реалистичностью анимации.

К сожалению, на их сайте пока ещё мало информации, не хватает подробного описания API. Радует то, что он уже в процессе написания.

• Интерполировать значения во времени;
• Контролировать движение анимации (включать/выключать/останавливать);
• Расширять ключевые шаги анимации дополнительными действиями.

• shifty.token.js — позволяет изменять css-свойства в конкретных форматах (например, +25px, а не +25; rgb(0,0,0) и так далее);
• shifty.interpolate.js — вычисляет один кадр в секунду (между конкретными точками анимации);
• shifty.bezier.js — определяет кривые cubic-bezier;
• shifty.formulas.js — готовый набор easing functions.

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

• Тип (scale, translate, rotate, skew);
• Easing (bounse, sway, hard bounse, hard sway,);
• Duration;
• Delay;
• Bounces;
• Индивидуальные параметры.

Удобное веб-приложение для создания анимации. Предоставляет координатную ось с анимируемым объектом, временную шкалу и панель для добавления промежуточных состояний. Присутствуют как общие настройки, так и настройки для каждого этапа анимации (keyframes).

Css-код созданных анимаций можно получить с префиксами и без.

Позволяют трансформировать объект в течение короткого промежутка времени. Созданную анимацию можно экспортировать в css (с префиксами и без) или в rekapi.

• Opacity;
• Rotate;
• Scale;
• Skew;
• Translate.

В интернете существует множество узконаправленных решений, которые не попадают в стандартную структуру «Простые и сложные». Именно их мы и рассмотрим в данном разделе статьи.

Spinkit — это набор из 11 css-эффектов, который можно применять для загрузочных страниц. В них используются translate и opacity, поэтому вся анимация будет обрабатываться в GPU, а не в CPU. Изначальный код написан на scss.

Как и прошлую библиотеку, CSS-loaders нужно использовать для анимирования процесса загрузки. Первоначальный код написан на less. В своем арсенале он имеет 6 анимаций.

Ещё одна css-библиотека для создания красивых загрузчиков из 28 вариантов. Написан на scss.

Whirl — это библиотека по созданию красивого процесса загрузки. Состоит из 19 вариантов анимации. Написана на jade, less и scss

Библиотека от Стаса Мельникова. Состоит из 27 анимационных вариантов процесса загрузки. Кроме данного набора готовых анимаций, у него есть и другие, но они уже платные.

В отличие от всех предыдущих библиотек все его решения для анимирования процесса загрузки выглядят оригинально. Имеются 7 вариантов. Написан на чистом css.

Небольшое js-решение для анимирования текста. Использует эффекты css-библиотеки Animate.css. Анимация подключается на появление и исчезновение.

Её можно использовать только на текстах из 1-2 строчки, так как для создания красивого эффекта он каждую букву оборачивает в отдельный слой. При применении на больших информационных материалах он может отрицательно повлиять на производительность браузера.

Библиотека аналогична предыдущей. При помощи неё можно не только анимировать текст, но и выделить конкретные слова и буквы.

CssShake — это библиотека для создания эффекта тряски (shake). Всего их 11. Написан на scss.

Js-библиотека без зависимостей для создания плавного перехода из одного числа в другой. Можно использовать в обратном отсчете времени или в метриках. Есть готовые темы для стилизации. Написан на sass и coffeeScript.

Iconate позволяет делать плавные переходы между двумя иконками (icons). Предоставляет 19 эффектов. Работает на javascript и css-классах.

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

• rocketPulse;
• rocketPulseHole;
• rocketRotate;
• rocketRotateHole;
• rocketRotateGo;
• rocketGost;
• rocketFlip;
• rocketCircle.

Позволяет при помощи javascript создавать анимационные эффекты с нестандартными временными функциями. Использует hardware-acceleration.

Javascript-библиотека для создания анимации с реалистичной физикой. Её можно комбинировать с другими решениями.

jQuery плагин для создания красивых переходов между страницами сайта. Анимация настраивается через data-атрибуты и вызовы плагина при помощи js.

• Fade;
• Fade up;
• Fade down;
• Fade left;
• Fade right;
• Rotate;
• Flip X;
• Flip Y;
• Overlay;
• Zoom.

• IE10+;
• Safari;
• Chrome;
• Firefox.

Летели года. Анимация наполнялась новыми функциями и возможностями. И вроде все хорошо, но чего-то не хватает…

А не хватает баланса между декларативным(css) и императивным(js) решением, которую "Web Animations" удачно создает.

• Работа в отдельном потоке (как в css);
• Полный контроль над анимацией (как в js);
• Удобный механизм создания анимации (css);
• Синхронизация процесса отображения браузера с обновлением экрана компьютера (requestAnimationFrame в js).

• Firefox 43+;
• Chrome 45+;
• Opera 35+;
• Android browser 47+;
• Chrome for android 49+.

Web animations обладает следующим синтаксисом:

Те, кто использовал css-анимацию, сразу увидят в нем знакомую картинку. Сначала указываются css-свойства, которые будут изменяться (как keyframe в css). Потом настройки анимации. При создании он вернет объект AnimationPlayer, у которого есть несколько полезных свойств и методов.

• currentTime — текущее положение анимации в миллисекундах (можно читать его и изменять);
• playbackRate — скорость анимации (позволяет ускорять эффекты в несколько раз);
• playState — текущее состояние анимации (idle, pending, running, paused, finished);
• startTime — время, с которого должна начаться анимация (можно прочитывать и изменять).

• finish — вызывает функцию при завершении анимации (можно указать свою);
• pause — ставит анимацию на паузу;
• play — запускает анимацию;
• reverse — запускает анимацию в обратном порядке.

9-го апреля 2015 года вышла спецификация по ещё одной интересной технологии для анимации. Она позволяет создавать движение объектов по траектории, где координаты задаются через специальное css-свойство motion-path (её можно использовать и в стандартной css-анимации и в web-animations). Точки указываются через контуры SVG.

В Web animations до сих пор не утвердилось множество спецификаций, а некоторые даже не реализованы. Но время не стоит на месте и скоро его будут поддерживать большинство современных браузеров.

Когда я начинал писать статью про css-анимацию, то думал, что управлюсь за пару дней, но оказалось, что материалов у меня по ней очень много… Поэтому в Word'е без картинок получилось 30 страниц. Разделять её по отдельным статьям я не стал, так как целостность повествования будет нарушена. Да и удобно, когда все в одном месте.

Все дополнительные материалы в статье советую прочитать. Потому что так Вы ещё лучше разберетесь в css-анимации. Надеюсь Вам понравится.

Параллельно написанию статей и созданию облачной IDE mr. Gefest, мы ведем группу про веб-разработку в вконтакте. Каждую опубликованную информацию мы жестко фильтруем, чтобы библиотека/материал был максимально полезен для Вас с практической точки зрения. Поэтому приглашаю Вас к нам. Чем больше будет подписчиков, тем больше мы будем публиковать полезных библиотек и материалов (мы тратим достаточно много времени на поиск и фильтрацию новых материалов и хочется поделиться им с большим количеством веб-разработчиков).