- PVSM.RU - https://www.pvsm.ru -
Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.
На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.
Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
… С того дня в моей голове засела мысль: "Я так и не посмотрел Deadpool пора уже структурировать эту информацию и рассказать о ней людям". Поэтому во время работы над облачной IDE «mr. Gefest» [1], я выделил несколько вечеров (оказалось далеко не несколько) для написания статьи, которую теперь Вы читаете.
В ней Вы узнаете, что такое 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.
Я не буду подробно расписывать каждый элемент CSS-Transitions, CSS-Animations, CSS-Transforms и content pseudo-elements, потому что в интернете существуют статьи, отлично раскрывающие их:
Поддержка браузерами:
Обертки для создания кроссбраузерных CSS-Animations (key-frames):
Анимацию в интерфейсах необходимо применять только для улучшения общения между программой и пользователем. Вставлять только из-за того, что это красиво или необычно, не следует. Необходимо все хорошо обдумать заранее.
Бывает откроешь блок с поиском, а там поле, заголовок и кнопка по-разному анимируется с разной скоростью. Будто мультик в интерфейсе. Это создает дискомфорт и неудобство.
Кроме того, при использовании большого количества анимации браузер может начать тормозить, даже если будет обрабатывать их отдельно в 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, изменения происходят плавно без задержек. Вы можете увидеть это на видео [17].
Использование GPU вместо CPU во время выполнения анимации особенно эффективно на телефонах и планшетах, где ресурсы центрального процесса ограничены.
Одни css-свойства проходят через 4 этапа отображения, другие через один или два. Необходимо их знать и грамотно применять в анимации. Например, при изменении «Height» какого-то DOM-объекта браузеру придется пройти через recalculate style, layout, paint и composite, потому что из-за него могут сдвинуться другие элементы страницы, а значит для каждого из них тоже необходимо сделать перерасчет позиции, размеров и других параметров.
Старайтесь использовать только те css-свойства, которые будут проходить через компоновщик или Paint + Composite:
Материалы по теме:
Относительно недавно появилось css-свойство — will-change. С его помощью можно сообщить браузеру, что конкретное свойство будет изменяться и его вычисления необходимо оптимизировать до начала анимации.
Will-change принимает следующие значения:
Если написать:
.text {
will-change: opacity;
-webkit-transition: opactiy 0.5s ease;
-moz-transition: opactiy 0.5s ease;
-o-transition: opactiy 0.5s ease;
transition: opactiy 0.5s ease;
}
.text:hover {
opacity:0.6;
}
То браузер заранее постарается оптимизировать анимацию для ".text".
Некоторые веб-разработчики экспериментальным путем выяснили, что will-change лучше вставлять не сразу, а за мгновение до начала анимации, а после завершения — удалять, так как оптимизация забирает часть оперативной памяти. Если так не поступить, то сайт будет занимать дополнительную память, даже если 99% времени эта анимация не используется. Такое добавление и удаление will-change делается при помощи javascript.
Стоить учесть, что если на сайте присутствуют элементы, в которых часто вызывается анимация, то для них логично указать will-change сразу в стилях.
Поддержка браузеров:
Статьи для ознакомления:
При реализации разного рода эффектов в интерфейсе пользователя необходимо правильно подбирать скорость выполнения. Например, диалоговые окна во время открытия должны будто наплывать, медленно и плавно, а при закрытии быстро уходить (после выполнения задачи пользователи хотят побыстрее закрыть всплывающее окно). В среднем анимация не должна быть дольше 500 секунд.
Так делать нельзя:
var b1=document.getElementById('box1');
var b2=document.getElementById('box2');
var b3=document.getElementById('box3');
var b2W=b2.offsetWidth;
b2.style.left=b2W+'px';
var b3W=b3.offsetWidth;
b3.style.left=b3W+'px';
b1.style.left='0';
А так нужно:
var b1=document.getElementById('box1');
var b2=document.getElementById('box2');
var b3=document.getElementById('box3');
var b2W=b2.offsetWidth;
var b3W=b3.offsetWidth;
b2.style.left=b2W+'px';
b3.style.left=b3W+'px';
b1.style.left='0';
Почему?
Если Вы читали прошлые советы, то узнали, что при выводе данных на экран, браузер проходит через 4 этапа отображения: вычисления стилей, расчета макета, прорисовки и компоновки.
В плохом примере два раза происходит принудительный перерасчет макета в строчках "var b3W=b3.offsetWidth;" и "var b3W=b3.offsetWidth;", потому что до этого было изменено css-свойство (left). Без пересчёта браузер просто не сможет точно определить «offsetWidth», потому что есть вероятность, что новое значение css-свойства повлияло на него.
Пожалуйста, группируйте операции чтения и обновления!
Дополнительный материал:
Странно, но за все это время мне не попадался материал о тестировании анимации в браузере. А ведь эта тема достойна отдельной статьи.
При помощи инструментов разработчиков в браузерах можно найти ресурсоемкие операции анимации, которые следовало бы исправить. Поэтому тестируйте анимацию при помощи них!
В этом совете я кратко опишу возможности нескольких браузеров для тестирования анимации.
Через Chrome удобнее всего отлаживать анимацию. Во вкладке инструментов разработчика «Timeline» присутствует:
В отладочной информации Google Chrome вы узнаете, какие операции нужно оптимизировать, а какие работают хорошо. В его подсказках присутствуют ссылки на статьи о способах исправления. В других браузерах такого не встречал.
В Safari анимация оценивается через вкладку «Шкала времени» раздела «Макет и рендеринг».
На верхнем блоке с временной шкалой сможете узнать, когда проявлялся конкретный этап отображения сайта. В нижнем блоке увидите очередность их выполнения. В подразделе «Отрисовка фреймов» получите более подробную информацию о каждом этапе.
В Safari откладка анимации мне показалась мало информативна. Нет советов по его улучшению в отличие от Google Chrome.
Для тестирования анимации он подходит меньше всего. Есть временная шкала со всеми шагами по анимации и блоком их очередности. Подробная информация о этапах отсутствует.
Firefox больше подходит для тестирования процесса разбора html и работы сайта (выполненные операции сборщика мусора, разбор html/xml, редукция CC Graph и так далее).
Раньше при создании анимации на js использовали setInterval/setTimeout. В них задавали интервал повторений (1000ms / 60(fps) = 16.7ms в идеале) и запускали эффекты. Это решение имело много недостатков:
К счастью, технологии не стоят на месте. Для решения этих проблем была придумана функция requestAnimationFrame. Её преимущества:
Отрицательные стороны нового решения:
Дополнительный материал:
У каждого типа библиотеки есть недостатки и преимущества. Их стоит учитывать при выборе.
Преимущества css-библиотек:
Недостатки css-библиотек:
Преимущества js-библиотек:
Недостатки js-библиотек:
Стоит помнить и о третьем типе. Можно написать анимацию самому или скопировать подходящую часть исходного кода из готовой библиотеки.
Теперь перейдем к изучению css- и js-библиотек.
При помощи специальных css-библиотек можно быстро создать простую анимацию:
Анимация подключается через классы при помощи javascript или вручную. Рассмотрим существующие библиотеки.
Библиотека с 75 эффектами. Существует с 2011 года. До 2013-14 года предоставляла online-конструктор эффектов. Позже разработчики его убрали и сделали build-генератор при помощи Gulp.js. Все эффекты используют @keyframes.
Его удобно применять на продающих страницах.
Создатели библиотеки разбили эффекты на 14 категорий:
Сайт: Animate.css [41].
Effeckt.css появился в 2013 году. При помощи него можно быстро создать красивую анимацию для появления диалогового окна, переключения вкладок, добавления элементов и много другого.
Он разбивает эффекты не по типу и стилю, как другие, а по конкретному назначению:
Effeckt.css написан на SCSS и большинство его эффектов не используют @keyframes, поэтому его код легче других.
Сайт: Effeckt.css [42].
Библиотека для создания эффектов, которые будут срабатывать при наведении курсора мыши на элемент. Его удобно применять для кнопок.
Анимация разбита на следующие категории:
Hover.css написан на less, scss и css.
Сайт: Hover.css [43].
Основан на Animate.css. В отличие от других библиотек он обладает множеством необычных эффектов:
Сайт: Magic animations [44].
Awesome — это набор из 89 эффектов от украинского разработчика, написанных на чистом css. Они разбиты на 12 категорий:
Его удобно использовать на продающих страницах.
Сайт: Awesome [45].
Статья разработчика о библиотеке [46].
Библиотека с небольшим размером по созданию красивой анимации. Код написан на scss. Предоставляет 11 готовых эффектов:
Сайт: Repaintless [47].
Библиотека с 36 готовыми эффектами и набором простых UI-компонентов. Его анимации делятся на 8 категорий:
Написан на css.
Сайт: All-animation [48].
Анимационная библиотека из 27 готовых эффектов. Построена на Rebound.js от facebook [50].
Позволяет сгенерировать css-анимацию при помощи json-объекта и скрипта reboundGet.js. Это удобно, ведь можно создать свои эффекты при помощи скрипта, а на сайте уже потом подключить только css без js.
Из-за готовых css-эффектов и механизма генерации, я решил включить библиотеку не в javascript-список, а в css.
Сайт: Reboundgen [49].
Morphodynamics — это библиотека для создания красивых эффектов. Предоставляет 47 вариантов анимаций.
Все эффекты делятся на 6 групп:
Имеет 16 готовых тем для стилизации. Библиотека хорошо подходит для создания анимаций у кнопок, меню и заголовков карточек товаров.
Изначальный код написан на less.
Сайт: Morphodynamics [51].
Простая библиотека для создания анимаций.
Имеет 37 готовых эффектов:
Написан на less.
Сайт: Css3animateit [52].
Маленькая библиотека с 16 готовыми эффектами для анимации:
Несмотря на небольшое количество эффектов, они полностью удовлетворяют потребности в анимации при разработки одностраничников.
Как и во многих библиотеках, в ней используются CSS3 @keyframes.
Сайт: CSS3 Animation Cheat Sheet [53].
Как Вы понимаете, css — это декларативный язык. Вся его анимация линейна и не меняется в зависимости от ситуации. Поэтому на чистом css нельзя сделать нормальную анимационную логику.
Javascript-библиотеки расширяют возможности и убирают ограничения css-решений. При помощи них можно создавать анимацию в зависимости от состояний (один эффект закончился, другой начался; пользователь нажал на кнопку, что-то появилось и так далее).
Благодаря js-решениям можно точно сказать, куда будет перемещен объект на 3-ей секунде. В css достичь такого нельзя, так как все шаги определяются процентами, а не секундами. Можно только примерно узнать, куда объект будет перемещен. Если клиент захочет изменить анимацию, то придется снова все пересчитывать (при создании соответствий между процентом и возможной секундой), а это дополнительная трата времени.
Css-анимация не всегда работает быстрее js-решений (даже когда вычисления проходят в GPU). Об этом рассказано в статье от Css-trick (потерял ссылку, ищю).
Существующие библиотеки можно разделить по типу применения (стандартная анимация и узкоспециализированная) и их сложности (простые и сложные).
Двадцать красиво-анимированных элемента, разделенных на 8 групп:
Эффекты настраиваются при помощи атрибутов и js-функций. Присутствует online-builder.
Сайт: Transformicons [55].
Библиотека для создания анимации. Обладает простым и понятным API. Занимает всего 5kb. Используют 3dmatrix. Заявлено 60 FPS. Можно делать несколько анимаций подряд через цепочку вызовов функций (как в jQuery).
Позволяет изменять позицию, ширину, высоту и прозрачность элементов. При помощи библиотеки можно поворачивать, увеличивать и уменьшать объекты.
Обладает 5 easing functions:
Позволяет задавать временные функции через математические js-выражения.
Сайт: Snabbt.js [56].
Ещё одна библиотека без зависимостей. При помощи неё можно делать не только производительную трансформацию, но и изменение стандартных свойств объектов (цвет фона, размер бордюра и так далее). Весит 13-14 кb.
Поддерживает 30 easing functions:
Так же можно определить свою временную функцию через Cubic-bezier.
Сайт: Move.js [57].
Разработанная в 2013 году библиотека для создания анимации. Используется как плагин к jQuery 2+. Является оберткой над Animate.css.
При вызове плагина указывается:
Animo.js весит 7.2 kb.
Сайт: Animo.js [58].
Библиотека с необычным способом использования. Вместо стандартного указания классов или вызовов функций javascript, нужно прописать дата-атрибут (data-anijs) и внести в него что-то вроде этого:
if: click, on: h1, do: pulse animated, to: h2
Где (ссылка на язык библиотеки [60]):
В одном элементе можно указать сразу несколько условий.
Его эффекты разделены на 15 категорий:
Всего в библиотеке 70 эффектов. Благодаря их online-builder (http://anicollection.github.io/) Вы можете выбрать необходимые эффекты и сгенерировать свою версию AniJS.
Сайт: Ani.js [59].
Библиотека для создания производительных анимационных эффектов. Можно использовать как плагин к jQuery. Поддерживает ie8+ и современные браузеры на компьютерах, телефонах и планшетах.
Он позволяет создавать эффективные анимации потому что:
Как и в других библиотеках, при его использовании указывается список css-свойств и настройки (время выполнения, easing и callback функция, зацикленность анимации и так далее).
Дополнительная информация:
Сайт: Velocity [61].
Небольшая библиотека для создания анимации (7 kb). Поддерживает Chrome, Safari, Firefox, Internet Explorer 10 и мобильные браузеры. Для эффектов используется только opacity и 2D/3D трансформация, так как это одни из самых производительных css-свойств.
Во время применения необходимо указать:
Для имитации реальной физики необходимо будет использовать дополнительные параметры.
В Animo.js можно управлять анимацией: останавливать, ставить паузу и возобновлять.
Сайт: Animatic.js [64].
Плагин к jQuery для создания анимации. Использует производительные css-свойства для высоких FPS и позволяет применять неэффективные (не рекомендуется).
Предоставляет следующие функции:
Поддерживает 29 временных функций.
Плагин можно использовать в цепочке вызовов (.transition().transition().transition()...).
Сайт: TransitJS [65].
Анимационная библиотека от создателей css-фреймворка «Foundation».
Поддерживает 5 типов анимации:
Предоставляет 3 скорости (normal, slow, fast) и 3-и easing-функции (linear, ease, bounce). Используется через css-классы или js-функции.
Сайт: Zurb Motion-UI [66].
Небольшая (2.8 kb) библиотека для создании css/svg анимации без зависимостей.
Она позволяет манипулировать 15 css-свойствами:
При создании анимации указывается:
Сайт: AnimatePlus [68].
Профессиональная библиотека для анимирования объектов. Состоит из:
К ней идет 19 плагинов (изменение css-свойств DOM элементов, связывание анимации с атрибутами объектов, анимирование svg-элементов и так далее).
Первоначально он разрабатывался для flash, но потом его перенесли на web-технологии.
Библиотеку можно использовать бесплатно только для сайтов, в которых клиенты не платят за использование его функций. В иных случаях необходимо покупать лицензию.
В бесплатной версии нельзя использовать большинство плагинов.
Такой подход разработчиков можно понять, ведь этот проект — их ежедневная работа.
Дополнительная информация:
Сайт: GreenSock [69].
Библиотека, в которой анимация создается только через javascript. В отличие от прошлого решения он бесплатен.
Состоит из следующих сущностей:
Transitionables имеет 9 easing функций (можно создать через математическое выражение):
Подробнее о нем в документации: samsarajs.org/docs/getting-started.html [73].
Сайт: SamsaraJs [72].
Popmotion — это библиотека для создания физически реалистичной анимации.
Все его объекты делятся на 5 категорий:
Standart:
Actions:
Roles:
Primitives:
Plugins:
Сравнение Popmotion, Velocity, TweenLite и TweenMax.https [75].
Сайт: Popmotion [74].
Очень интересная библиотека для создания анимации у DOM-элементов. Её изюминка состоит в том, что кривые (easing functions) задаются через svg-линии, а не математические выражения и css-определения.
Как вы знаете, при помощи css можно создать easing functions только с двумя точками изменения (и искривления по ним). Но что делать, если нужно определить движение из 5 точек для имитации движения объекта из реального мира? Создавать «костыли», которые превращают код в сложное, большое и непонятное «чудо»?
Mo.js решил эту проблему изящным способом. Временные функции изображаются svg-линиями. Они могут быть из любого количества искривлений. Библиотека на входе принимает svg код/файл и создает все необходимые изменения. Это позволяет создавать по-настоящему реалистичную физику объектов из реального мира.
В одной Tween-функции Mo.js можно подключить сразу несколько эффектов на несколько элементов. При этом имеется возможность указывать на разные свойства — разные кривые. Это дает шанс создавать удивляющие реалистичностью анимации.
К сожалению, на их сайте пока ещё мало информации, не хватает подробного описания API. Радует то, что он уже в процессе написания.
Сайт: Mo.js [76].
Библиотека в 4kb. Обладает небольшим набором функций для создания настраиваемой анимации:
При помощи объекта Tweenable происходит создание и управление анимацией.
К базовой версии можно подключить плагины, расширяющие возможности:
На его основе можно разработать свой инструмент для создания анимации (например, как это сделал Rekapi [78]).
Сайт: Shifty.js [77].
При разработке сайтов и веб-приложений не всегда хватает стандартных решений. Поэтому некоторые программисты разработали для себя и коллег по цеху специальные инструменты по быстрому созданию анимации.
Online-сервис «Bounce.js» позволяет программистам создавать изящные анимации. В нем посредством кнопки «Add component» можно добавить любое количество управляемых эффектов со следующими настройками:
Созданные анимации можно экспортировать в css.
Удобное веб-приложение для создания анимации. Предоставляет координатную ось с анимируемым объектом, временную шкалу и панель для добавления промежуточных состояний. Присутствуют как общие настройки, так и настройки для каждого этапа анимации (keyframes).
Css-код созданных анимаций можно получить с префиксами и без.
Позволяют трансформировать объект в течение короткого промежутка времени. Созданную анимацию можно экспортировать в css (с префиксами и без) или в rekapi.
Поддерживает следующие свойства:
Мне он показался не удобным и не понятным.
В интернете существует множество узконаправленных решений, которые не попадают в стандартную структуру «Простые и сложные». Именно их мы и рассмотрим в данном разделе статьи.
Как и прошлую библиотеку, CSS-loaders нужно использовать для анимирования процесса загрузки. Первоначальный код написан на less. В своем арсенале он имеет 6 анимаций.
Сайт: Css-loaders [84].
Библиотека от Стаса Мельникова. Состоит из 27 анимационных вариантов процесса загрузки. Кроме данного набора готовых анимаций, у него есть и другие, но они уже платные.
Сайт: Preloaders [87].
В отличие от всех предыдущих библиотек все его решения для анимирования процесса загрузки выглядят оригинально. Имеются 7 вариантов. Написан на чистом css.
Сайт: Shelleylowe css-animations [88].
Небольшое js-решение для анимирования текста. Использует эффекты css-библиотеки Animate.css. Анимация подключается на появление и исчезновение.
Её можно использовать только на текстах из 1-2 строчки, так как для создания красивого эффекта он каждую букву оборачивает в отдельный слой. При применении на больших информационных материалах он может отрицательно повлиять на производительность браузера.
Сайт: Textillate [89].
Библиотека позволяет создавать анимацию для перемещения одних элементов к другим. Его можно применить для интернет-магазинов, чтобы во время покупки товара он анимировано попадал в корзину.
Rocket CSS имеет 8 эффектов:
Сайт: Rocket CSS [94].
Позволяет при помощи javascript создавать анимационные эффекты с нестандартными временными функциями. Использует hardware-acceleration.
Дополнительные примеры [96].
Сайт: CSS3 Transitions with custom easing functions [95].
Javascript-библиотека для создания анимации с реалистичной физикой. Её можно комбинировать с другими решениями.
Сайт: Dynamics.js [97].
jQuery плагин для создания красивых переходов между страницами сайта. Анимация настраивается через data-атрибуты и вызовы плагина при помощи js.
Эффекты распределены по 10 категориям:
Поддерживается всеми современными браузеры:
Имеет множество настроек.
Сайт: Animsition [98].
Летели года. Анимация наполнялась новыми функциями и возможностями. И вроде все хорошо, но чего-то не хватает…
А не хватает баланса между декларативным(css) и императивным(js) решением, которую "Web Animations" удачно создает.
Он объединяет их положительные стороны:
К сожалению, пока он поддерживается только в нескольких браузерах:
Для других существует полифил (от IE10+) [99].
Web animations обладает следующим синтаксисом:
element.animate([
{cssProperty: value0},
{cssProperty: value1},
{cssProperty: value2},
//...
], {
direction: nameDirection, // направление анимации, 'normal', 'reverse', и т.д.
iterations: iterationCount, // количество повторений (бесконечное или конкретное число)
delay: delayValue, //задержка в миллисекундах
duration: timeInMs, // время выполнения в миллисекундах
easing: nameEaseFunction, //'linear', кривая Безье, и т.д.
fill: nameFill //'forwards', 'backwards', 'both', 'none', 'auto'
});
Те, кто использовал css-анимацию, сразу увидят в нем знакомую картинку. Сначала указываются css-свойства, которые будут изменяться (как keyframe в css). Потом настройки анимации. При создании он вернет объект AnimationPlayer, у которого есть несколько полезных свойств и методов.
Свойства AnimationPlayer:
Методы AnimationPlayer:
При помощи объектов GroupEffect и keyframeEffects можно синхронизировать анимацию сразу у нескольких элементов на странице. SequenceEffect тоже позволяет объединять множество анимаций (как GroupEffect), но разрешает проигрывать их неодновременно. Все это упрощает работу. Ведь раньше при помощи css нам бы пришлось подбирать для каждого элемента величину задержки, чтобы прошлая анимация успела завершится (представьте последовательность из 8 анимаций и Вам необходимо в одной из них изменить время выполнения, все придется пересчитывать).
9-го апреля 2015 года вышла спецификация по ещё одной интересной технологии для анимации. Она позволяет создавать движение объектов по траектории, где координаты задаются через специальное css-свойство motion-path (её можно использовать и в стандартной css-анимации и в web-animations). Точки указываются через контуры SVG.
В Web animations до сих пор не утвердилось множество спецификаций, а некоторые даже не реализованы. Но время не стоит на месте и скоро его будут поддерживать большинство современных браузеров.
Материалы по Web Animations:
Когда я начинал писать статью про css-анимацию, то думал, что управлюсь за пару дней, но оказалось, что материалов у меня по ней очень много… Поэтому в Word'е без картинок получилось 30 страниц. Разделять её по отдельным статьям я не стал, так как целостность повествования будет нарушена. Да и удобно, когда все в одном месте.
Все дополнительные материалы в статье советую прочитать. Потому что так Вы ещё лучше разберетесь в css-анимации. Надеюсь Вам понравится.
Параллельно написанию статей и созданию облачной IDE mr. Gefest, мы ведем группу про веб-разработку в вконтакте. Каждую опубликованную информацию мы жестко фильтруем, чтобы библиотека/материал был максимально полезен для Вас с практической точки зрения. Поэтому приглашаю Вас к нам [110]. Чем больше будет подписчиков, тем больше мы будем публиковать полезных библиотек и материалов (мы тратим достаточно много времени на поиск и фильтрацию новых материалов и хочется поделиться им с большим количеством веб-разработчиков).
Опечатки и ошибки в тексте пожалуйста присылайте в личку.
Автор: mr. Gefest
Источник [119]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/116414
Ссылки в тексте:
[1] облачной IDE «mr. Gefest»: http://gefest-ide.com/index.php?url=habr-anim
[2] Про CSS-Transitions от Javascript.ru: https://learn.javascript.ru/css-transitions
[3] Про CSS-Transitions в документации Mozilla: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
[4] Про CSS-Animations в документации Mozilla: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations
[5] Про css-анимацию в Frontender: http://frontender.info/ochen-prostoe-rukovodstvo-po-css-animatsiyam/
[6] Про CSS-Animations от SmashingMagazine на английском: https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/
[7] Css-анимация на html5book: http://html5book.ru/css3-animation/
[8] Про CSS-Transform от CSS-tricks на английском: https://css-tricks.com/almanac/properties/t/transform/
[9] Про CSS-Transform в документации Mozilla на английском: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
[10] Про CSS-Transform на хабре: https://habrahabr.ru/post/135816/
[11] Про псевдоэлементы на хабре: https://habrahabr.ru/post/154319/
[12] CSS Generated content for pseudo-elements: http://caniuse.com/#search=pseudo-elements
[13] CSS3 2D Transforms: http://caniuse.com/#search=transforms
[14] CSS-Transitions: http://caniuse.com/#feat=css-transitions
[15] CSS-Animations: http://caniuse.com/#feat=css-animation
[16] jQuery.Keyframes: http://keyframes.github.io/jQuery.Keyframes/
[17] на видео: http://www.youtube.com/watch?v=-62uPWUxgcg
[18] Css-свойства с этапами отображения: http://csstriggers.com/
[19] Часто используемые css-свойства: http://goo.gl/lPVJY6
[20] Ускоренный рендеринг в Chrome: http://www.html5rocks.com/en/tutorials/speed/layers/
[21] Как сделать анимацию производительнее: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
[22] Про производительную визуализацию от Google: https://developers.google.com/web/fundamentals/performance/rendering/
[23] Тест анимации с left и translateX: http://mrsamo.github.io/web-animations/examples/perf/index.html
[24] Про аппаратное ускорение от Яндекса на хабре: https://habrahabr.ru/company/yandex/blog/239169/
[25] Про GPU Accelerated Compositing in Chrome: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
[26] Все о will-change от OperaDev: https://dev.opera.com/articles/ru/css-will-change-property/
[27] Про will-change в документации Mozilla: https://developer.mozilla.org/ru/docs/Web/CSS/will-change
[28] Про will-change в CSS-tricks: https://css-tricks.com/almanac/properties/w/will-change/
[29] Описание стандарта will-change: https://drafts.csswg.org/css-will-change/
[30] Про перерасчет макетов: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts
[31] Практические советы по CSS: https://habrahabr.ru/post/273471/#css_animations
[32] Старая, но полезная заметка о рендеринге в браузере: http://webo.in/articles/all/2009/31-rending-restyle-reflow-relayout/
[33] О requestAnimationFrame на хабре: https://habrahabr.ru/post/114358/
[34] Плюсы и минусы requestAnimationFrame: http://html5.by/blog/what-is-requestanimationframe/
[35] Как использовать requestAnimationFrame: http://forwebdev.ru/javascript/using-requestanimationframe/
[36] Про requestAnimationFrame от Mozilla: https://developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame
[37] О requestAnimationFrame от разработчика Google Chrome: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
[38] Про проблемы requestAnimationFrame в Chrome от Google: https://developers.google.com/web/updates/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision
[39] Про requestAnimationFrame в MSDN Microsoft: https://msdn.microsoft.com/ru-ru/library/hh773174(v=vs.85).aspx
[40] Polyfill requestAnimationFrame: https://gist.github.com/paulirish/1579671
[41] Animate.css: http://daneden.github.io/animate.css/
[42] Effeckt.css: http://h5bp.github.io/Effeckt.css/
[43] Hover.css: http://ianlunn.github.io/Hover/
[44] Magic animations: http://minimamente.com/example/magic_animations/
[45] Awesome: http://pavlyukpetr.com/awesome/
[46] Статья разработчика о библиотеке: https://habrahabr.ru/sandbox/93045/
[47] Repaintless: http://szynszyliszys.github.io/repaintless/
[48] All-animation: http://all-animation.github.io/
[49] Reboundgen: http://dwarcher.github.io/reboundgen/examples/
[50] Rebound.js от facebook: http://facebook.github.io/rebound-js/
[51] Morphodynamics: http://seven-phases-max.github.io/morphodynamics/hover.html
[52] Css3animateit: http://jackonthe.net/css3animateit/
[53] CSS3 Animation Cheat Sheet: http://justinaguilar.com/animations/
[54] Tuesday: http://shakrmedia.github.io/tuesday/
[55] Transformicons: http://www.transformicons.com/
[56] Snabbt.js: http://daniel-lundin.github.io/snabbt.js/
[57] Move.js: http://visionmedia.github.io/move.js/
[58] Animo.js: http://labs.bigroomstudios.com/libraries/animo-js
[59] Ani.js: http://anijs.github.io/
[60] ссылка на язык библиотеки: https://github.com/anijs/anijs/wiki/The-language
[61] Velocity: http://julian.com/research/velocity/
[62] О VelocityJS на Css-tricks: https://css-tricks.com/improving-ui-animation-workflow-velocity-js/
[63] Animation Tester: http://codepen.io/julianshapiro/full/oHaCy/
[64] Animatic.js: http://lvivski.com/animatic/
[65] TransitJS: http://ricostacruz.com/jquery.transit/
[66] Zurb Motion-UI: http://zurb.com/playground/motion-ui
[67] Shift.js: http://shift.octavector.co.uk/
[68] AnimatePlus: https://github.com/bendc/animateplus
[69] GreenSock: http://www.greensock.com/
[70] О GreenSock на русском: https://habrahabr.ru/post/144466/
[71] Видеокурс на en: https://ihatetomatoes.net/product/greensock-101/
[72] SamsaraJs: http://samsarajs.org/
[73] samsarajs.org/docs/getting-started.html: http://samsarajs.org/docs/getting-started.html
[74] Popmotion: https://popmotion.io/
[75] Сравнение Popmotion, Velocity, TweenLite и TweenMax.https: https://popmotion.io/guides/feature-comparison
[76] Mo.js: http://mojs.io/
[77] Shifty.js: http://jeremyckahn.github.io/shifty/
[78] Rekapi: http://rekapi.com/
[79] Bounce.js: http://bouncejs.com/
[80] Css-animate: http://cssanimate.com/
[81] Stylie: http://jeremyckahn.github.io/stylie/
[82] Mantra: http://jeremyckahn.github.io/mantra/
[83] Spinkit: http://tobiasahlin.com/spinkit/
[84] Css-loaders: http://projects.lukehaas.me/css-loaders/
[85] Loaders: https://connoratherton.com/loaders
[86] Whirl: http://jh3y.github.io/whirl/
[87] Preloaders: http://stas-melnikov.ru/preloaders/
[88] Shelleylowe css-animations: http://shelleylowe.com/css-animations/
[89] Textillate: http://jschr.github.io/textillate/
[90] Blast: http://julian.com/research/blast/
[91] CssShake: http://elrumordelaluz.github.io/csshake/
[92] Odometer: http://github.hubspot.com/odometer/docs/welcome/
[93] Iconate: http://bitshadow.github.io/iconate/
[94] Rocket CSS: http://minimamente.com/example/rocket/
[95] CSS3 Transitions with custom easing functions: http://www.joelambert.co.uk/morf/
[96] Дополнительные примеры: http://scripty2.com/hardware-acceleration/
[97] Dynamics.js: http://dynamicsjs.com/
[98] Animsition: http://git.blivesta.com/animsition/
[99] Для других существует полифил (от IE10+): https://github.com/web-animations/web-animations-js
[100] Спецификация web-animations в Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Animation
[101] Поддержка web-animations браузерами: http://caniuse.com/#feat=web-animation
[102] Состояние анимации в 2014 года: http://frontender.info/the-state-of-animation-2014/
[103] Спецификация технологии по созданию траектории движения объектов: https://www.w3.org/TR/motion-1/
[104] Полифил web-animations: http://web-animations.github.io/web-animations-demos/
[105] Серия статей про web-animations: http://css-live.ru/tag/web-animations-api
[106] Спецификация web-animations: https://w3c.github.io/web-animations/
[107] Про web-animations на хабре: https://habrahabr.ru/post/226169/
[108] Презентация про css и js анимацию: http://mrsamo.github.io/web-animations/
[109] Полезные ссылки про web-animations: http://css-live.ru/articles/web-animations-api-poleznye-ssylki.html
[110] приглашаю Вас к нам: https://vk.com/mrgefest
[111] Ссылки про анимацию: https://github.com/fliptheweb/motion-ui-design
[112] Создание css-анимации за 15 минут: https://www.stanleycyang.com/tutorials/css-animations-in-15-minutes
[113] Про производительность анимации от Google: https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance
[114] Про подтормаживание в сложных макетах от Google: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=ru
[115] Контролирование css-анимации при помощи javascript: https://css-tricks.com/controlling-css-animations-transitions-javascript/
[116] Использование событий css-анимации на javascript: http://www.sitepoint.com/css3-animation-javascript-event-handlers/
[117] Про производительность css-анимации на русском: http://css-live.ru/articles/proizvoditelnost-css-animacij-nerasskazannaya-istoriya-s-kommentariyami-pola-ajrisha.html
[118] Список easing functions: http://easings.net/ru
[119] Источник: https://habrahabr.ru/post/280370/
Нажмите здесь для печати.