Девять простых примеров CSS3 анимации. Использование CSS-анимации
Создание сложной анимации иногда может превратиться в трудоемкий процесс, и здесь пригодятся библиотеки и генераторы анимации. В этой статье приводится перечень лучших инструментов для создания анимации CSS3 .
1. Magic CS33 Animations
Magic CSS3 Animations — это пакет CSS3-анимаций со спецэффектами, которые вы можете свободно использовать для любых веб-проектов. Просто включите стиль CSS magic.css или минимизированную версию magic.min.css .
2. CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet представляет собой набор предустановленной plug-and-play анимации для веб-проектов. Для его использования нужно добавить стили на сайт и применить подготовленные классы CSS к элементам, которые вы хотите анимировать. CSS3 Animation Cheat Sheet использует правило @keyframes и работает во всех последних версиях браузеров (в том числе в IE 10 ).
3. CSS3 Keyframes
CSS3 Keyframes Animation Generator представляет собой онлайн-инструмент, который позволяет создавать анимацию с помощью правила @keyframes .
4. Magic
Включает в себя многие эффекты CSS . Эффекты рассортированы по нескольким категориям (магия, перспектива, вращение, мерцание, статика, слайды, CSS3 анимация при наведении ), и все они довольно красивые. Каждый из них имеет свои собственные классы. Самый простой способ применить их — добавить эти классы к целевым элементам через JavaScript .
5. Animate.css
Animate.css предоставляет набор кросс-браузерных эффектов CSS3-анимации . Эффекты могут использоваться для привлечения внимания, создания анимации на основе появления и исчезновения элементов.
6. Bounce. Js
Это JavaScript-библиотека для создания динамической анимации. Просто добавьте компонент и выберите пресет. После этого вы можете получить короткий URL-адрес или экспортировать анимацию CSS3 из примеров.
7. Hover.CSS
Hover.CSS — полезная коллекция эффектов на CSS3 , которые могут применяться для призыва к действию, кнопкам, логотипам, специальным изображениям и так далее. Для использования коллекции достаточно скопировать и вставить код эффекта в CSS или разместить ссылку на его файл стилей.
8. Ani.js
AniJS — это декларативная библиотека для создания CSS-анимации , которая позволяет ускорить и обогатить разработку. Она полностью документирована и проста в использовании.
9. Progress.js
ProgressJs — это JavaScript и CSS3 библиотека , которая помогает разработчикам создавать и управлять индикаторами загрузки (прогресс-барами ). Вы можете создать собственный шаблон для прогресс-бара или легко настроить готовый.
10. Keyframer
Keyframer — это удобный инструмент, который поможет вам создать CSS3 анимацию . Кeyframer довольно прост в использовании. Чтобы добавить ключевой кадр, вам нужно только кликнуть по шкале времени, а затем нажать на круглую кнопку, чтобы применить CSS-стили для анимации. Или кнопку с крестиком, чтобы удалить текущий кадр.
11. Stylie
Инструмент для простого создания CSS3-анимации . Нужно настроить анимацию с помощью графика, изменить ее, получить сгенерированный CSS-код и все готово!
12. CSSketch
CSSketch — это Sketch 3 плагин , который позволяет быстро изменять дизайн, вкладывая таблицы стилей. Он поддерживает язык стилей {less }. Благодаря этому вы сможете использовать в таблице стилей функции и переменные. CSSketch — это программное обеспечение с полностью открытым исходным кодом, так что вы можете внести свой вклад в его развитие.
13. ALighter
JQuery-плагин для создания анимированной подсветки и CSS3 анимации фона. Вы можете настроить анимацию (скорость и размер ), эффект (цвет, прозрачность и размытие ) и задать конкретную продолжительность или отключить таймер полностью.
14. deCSS3
Это средство для тестирования отказоустойчивости (постепенной деградации ) кода CSS3 . С его помощью вы сможете увидеть, как веб-страница будет отображаться в IE 6-8 версии .
15. GFX
GFX — это библиотека 3D CSS3 анимации , которая расширяет JQuery несколькими полезными функциями для программного создания CSS3 переходов , которые управляются с помощью метода setTimeout .
Перевод статьи «15 Best CSS3 Animation Tools for Developers » был подготовлен дружной командой проекта
Мы недавно видели, что переходы - это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в CSS являются специфическим видом анимации, где:
- есть только два состояния: начало и конец;
- анимация не зациклена;
- промежуточные состояния управляются только функцией времени.
Но что если вы хотите:
- иметь контроль над промежуточными состояниями?
- зациклить анимацию?
- сделать разные виды анимаций для одного элемента?
- анимировать определённое свойство только на половину пути?
- имитировать различные функции времени для разных свойств?
Анимация в CSS позволяет всё это, и не только.
Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).
Свойства анимации
Как и transition , свойство animation является сокращённым для нескольких других:
- animation-name : название анимации;
- animation-duration : как долго длится анимация;
- animation-timing-function : как вычисляются промежуточные состояния;
- animation-delay : анимация начинается спустя некоторое время;
- animation-iteration-count : сколько раз должна выполняться анимация;
- animation-direction : должно движение идти в обратную сторону или нет;
- animation-fill-mode : какие стили применяются до начала анимации и после её завершения.
Быстрый пример
Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания :
@keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); } 100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); } } .loading-button { animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both; }
Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её .
Я использовал сокращенное свойство animation и включил все возможные варианты:
- animation-name: bouncing (совпадает с названием ключевых кадров)
- animation-duration: 0.5s (полсекунды)
- animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
- animation-delay: 0s (без задержки)
- animation-iteration-count: infinite (воспроизводится бесконечно)
- animation-direction: alternate (идёт назад и вперёд)
- animation-fill-mode: both
@keyframes
Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров . Вообще, ключевые кадры - это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:
- 0% - первый шаг анимации;
- 50% - шаг на полпути в анимации;
- 100% - последний шаг.
Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.
Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.
Каждый ключевой кадр является правилом CSS , это означает, что вы можете писать свойства CSS как обычно.
Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием :
@keyframes around { 0% { left: 0; top: 0; } 25% { left: 240px; top: 0; } 50% { left: 240px; top: 140px; } 75% { left: 0; top: 140px; } 100% { left: 0; top: 0; } } p { animation: around 4s linear infinite; }
Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite , то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.
animation-name
Название анимации используется, по крайней мере, дважды :
- при написании анимации с помощью @keframes ;
- при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).
Подобно именам классов CSS, название анимации может включать в себя только:
- буквы (a-z);
- цифры (0-9);
- подчёркивание (_);
- дефис (-).
Название не может начинаться с цифры или с двух дефисов.
animation-duration
Как и длительность перехода , длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
Selector { animation-duration: 0.5s; }
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.
animation-timing-function
Подобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова , такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье .
Selector { animation-timing-function: ease-in-out; }
Значение по умолчанию: ease .
Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.
animation-delay
Как и с задержкой перехода , задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
По умолчанию равно 0s, что означает отсутствие любой задержки.
Полезно использовать, когда включается несколько анимаций в серии .
A, .b, .c { animation: bouncing 1s; } .b { animation-delay: 0.25s; } .c { animation-delay: 0.5s; }
animation-iteration-count
По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:
- целые числа, вроде 2 или 3;
- дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
- ключевое слово infinite , которое будет повторять анимацию бесконечно.
animation-direction
Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.
- normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
- reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
- alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
- alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.
Это легче представить, если счётчик итераций анимации установлен как infinite .
animation-fill-mode
Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.
При определении ключевых кадров можно указать правила CSS , которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться с теми, которые уже применяются к анимируемым элементам.
animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации .
Давайте представим себе кнопку , которая является:
- красной по умолчанию;
- становится синей в начале анимации;
- и в итоге зелёной , когда анимация завершена.
До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.
CSS transitions
CSS transitions позволяют сделать изменения CSS-свойств плавно и в течение некоторого времени. Таким образом, вы получаете возможность контролировать процесс перехода элемента от одного состояния к другому. Начнем с простейшего примера и продолжим дальше.
При наведении курсора на квадрат плавно изменяется цвет фона.
Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:
- transition-property;
- transition-duration;
- transition-timing-function;
- transition-delay;
- transition;
transition-property - указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.
Transition-property: width;
transition-duration - задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.
Transition-duration: 1s;
transition-timing-function - временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.
Transition-timing-function: cubic-bezier(0, 0, 1, 1);
transition-delay - задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.
Transition-delay: 500ms;
transition - это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.
Transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;
У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.
С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:
CSS animations
CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.
Наш круг ожил и он как будто пульсирует.
Есть 9 свойств, которые позволяют контролировать CSS animations:
- animation-name;
- animation-duration;
- animation-timing-function;
- animation-delay;
- animation-iteration-count;
- animation-direction;
- animation-play-state;
- animation-fill-mode;
- animation;
animation-name - здесь указвается имя анимации, которое связывает правило @keyframes с селектором.
Animation-name: my-animation; @keyframes my-animation { 0% { opacity: 0; } 100% { opacity: 1; } }
animation-iteration-count - задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.
Animation-iteration-count: 2;
animation-direction - задаёт направление анимации.
Animation-direction: reverse;
animation-play-state - данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).
Animation-play-state: paused;
animation-fill-mode - устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:
- none - анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
- forwards - анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
- backwards - анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
- both - анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;
Animation-fill-mode: backwards;
Свойства animation-duration , animation-timing-function , animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.
С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример - это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:
Motion Path Module
Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.
В этой спецификаии есть 3 свойства:
- motion-path;
- motion-offset;
- motion-rotation;
motion-path - это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.
Motion-path: path("M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z");
motion-offset - это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.
@keyframes airplane-fly { 0% { motion-offset: 0; } 100% { motion-offset: 100%; } }
motion-rotation - это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах ("-45deg", "30deg" и т.д).
Motion-rotation: auto;
К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.
Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).
В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.
CSS 3D облака
В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.
Логотипы на чистом CSS
Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.
Алфавит с CSS анимацией
Отличный и художественный пример использования CSS в алфавите
3D навигация для сайта
Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.
Дудл от Google на CSS
Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации
Слайдер
Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.
Двойное анимированное кольцо
Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS
Размытие на CSS
Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.
Полное руководство по Flexbox
Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.
Красочное и анимированное меню на CSS3
Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.
CSS фильтры
Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.
CSS формы
Пост о CSS формах с многочисленными примерами
Прогресс бары на CSS
Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.
Анимация — Animate.css
Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.
Индикаторы загрузки — Spinkit
Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.
Кнопки
Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант
Генератор для создания переключателей
Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.
Всплывающие подсказки
CSS библиотека бесплатных всплывающих подсказок — Hint.css
Цветовые схемы
Схемы цветов для людей, которые не любят копаться в коде
Большая часть того, что приносит нам удовольствие в анимации, связано с перемещением по экрану различных объектов. hover эффекты CSS привлекают внимание пользователей к контенту, определенной части интерфейса и улучшают общее восприятие ресурса.
Перемещение может быть немного сумасшедшим, как это:
Перемещение может быть и не таким явным. Например, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже:
Your browser does not support inline frames or is currently configured not to display inline frames.
В приведенных примерах перемещение реализовано с помощью CSS . И анимация, и переходы CSS позволяют чрезвычайно просто перейти от статики к движению. Но, несмотря на эту простоту, есть определенные нюансы, которые нужно учитывать, чтобы CSS hover эффект при наведении работал плавно. В этой статье я расскажу именно о них.
Преобразование с помощью translate3d()
При перемещении элемента изменяется его вертикальная и горизонтальная позиции. Существуют несколько свойств CSS , которые применяются для этого. Но я хочу порекомендовать вам использовать функцию translate3d свойства transform вместо привычных margin , padding , left , top , потому что она обеспечивает более плавную анимацию.
Функция translate3d принимает три аргумента, но сначала рассмотрим те, которые отвечают за перемещение содержимого по горизонтали и вертикали:
Аргумент Х задает перемещение по горизонтали, Y — по вертикали. Например, если вы хотите переместить содержимое на 20 пикселей вправо и вверх, функция translate3d должна выглядеть следующим образом:
Foo { transform: translate3d(20px, 20px, 0px); }
Третий аргумент, который определяет перемещение по оси Z , мы рассматривать не будем. Так как нас интересует 2d-hover эффекты CSS .
Как видите, функция translate3d не особенно сложная. Далее мы рассмотрим, как использовать ее в анимации CSS для создания движения.
Переход
Чтобы использовать это свойство в переходе, нужно выполнить два этапа. Сначала необходимо указать transform в качестве свойства, которое должно отслеживать переход:
PictureContainer img { position: relative; top: 0px; transition: transform .2s ease-in-out; }
Определив переход, вы можете задать свойство transform с функцией translate3d :
PictureContainer img:hover { transform: translate3d(0px, -150px, 0px); }
Как показано в примере, приведенном в начале статьи, CSS hover эффект при наведении курсора мыши на любой из элементов приводит к смещению изображения вверх на 150 пикселей.
Анимация
В случае анимации, убедитесь, что ключевые кадры в @keyframes содержат свойство transform с translate3d :
@keyframes bobble { 0% { transform: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; } 50% { transform: translate3d(50px, 50px, 0px); animation-timing-function: ease-out; } 100% { transform: translate3d(50px, 40px, 0px); } }
Пример из статьи содержит все, что нужно, чтобы вы увидели, как работает CSS hover эффект для табличной верстки.
Не забывайте о префиксах
Чтобы разметка работала в различных браузерах, обязательно используйте для свойства transform вендорные префиксы или библиотеку —prefix-free .
Переходы с помощью JavaScript
Также можно создавать анимацию перемещения в JavaScript . Те же правила действуют и здесь. Сначала нужно установить позицию, используя transform translate3d , но в JavaScript это немного сложнее.
Фрагмент кода, который нужен для этого, выглядит следующим образом:
function getSupportedPropertyName(properties) { for (var i = 0; i < properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; } var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var item = document.querySelector("#theItem"); var transformProperty = getSupportedPropertyName(transform); if (transformProperty) { item.style = translate3d(someValueX, someValueY, 0px); }
Этот код кажется сложным потому, что мы используем префиксы и проверяем соответствие используемой версии функции transform .
Почему нам не подходит установка позиции с помощью margin , top , left и т.д.?
Если у вас нет на то особой причины, не используйте для создания hover эффектов CSS свойства margin , padding , top , left , bottom или right . Хотя это может показаться противоречащим здравому смыслу. Позвольте мне пояснить…
Ненужные вычисления
Когда вы изменяете набор значений для шести свойств CSS , которые я только что перечислил, браузер выполняет дополнительные вычисления того, как это отобразится на макете всей страницы. Я не против того, чтобы использовать эти свойства для работы с макетом. Но их применение в анимации или переходах, и изменение значений шестьдесят раз в секунду – это чересчур.
Вы можете задать для position элемента, который вы перемещаете, значение fixed или absolute . Это избавит браузер от необходимости вычислять макет для всего документа. Но в этом случае браузер все равно выполняет вычисления для элемента, который перемещается. И результат применения translate3d не обязательно будет идентичен результату, получаемому при использовании margin , padding и т.д. Более того, как вы увидите в следующем разделе, они не будут на 100% идентичны.
Аппаратное ускорение
Когда мы имеем дело с отображением элементов на экране, связанные с этим вычисления можно производить с помощью процессора или видеокарты. Но для создания CSS hover эффектов для табличной верстки лучше задействовать видеокарту:
GPU предназначен только для обработки задач, связанных с отображением на экране. В то же время процессор параллельно обрабатывает огромное количество разнообразных задач. И для того, чтобы ваша анимация отображалась плавно, нельзя пренебрегать этой закономерностью. Разница в плавности отображения анимации может быть не сильно заметна на мощном стационарном компьютере или ноутбуке, но явно проявится на мобильных устройствах. Из личного опыта могу сказать, что на этих устройствах анимация с использованием CPU проигрывается более прерывисто, чем та, которая использует GPU .
А как обеспечить, чтобы анимация в режиме аппаратного ускорения использовала GPU ? Применить translate3d ! При преобразовании элемента с помощью translate3d он обрабатывается через GPU в Webkit-браузерах , таких как Chrome и Safari (которые установлены на iPhone и iPad ), в Internet Explorer 9/10 , а также в последних версиях Firefox . Это дает translate3d явные преимущества.
Как насчет JavaScript?
Что касается hover эффектов CSS , созданных на JavaScript , где все интерполяции обрабатывается кодом, я на самом деле не знаю, является ли использование GPU таким продуктивным. Но для установки с помощью JavaScript переходов и анимации CSS со свойством translate3d используется GPU .
Когда вы применяете JavaScript , чтобы задать свойства анимации или переходов, интерполяция между начальной и конечной точкой анимации все равно создается с помощью браузера. Перемещающиеся синие круги, которые вы могли видеть в начале этой статьи, являются подтверждением этого.
Боже, благослови преобразования!
Причина, по которой transform является более производительным, заключается в том, что оно не затрагивают никакие другие элементы. Любые действия, которые вы выполняете, применяются только к одному элементу, и браузеру не нужно перестраивать все окно. Он модифицирует только ту часть экрана, которая содержит перемещающийся контент. Это не зависит от того, задействован GPU или нет.