Как сделать плавную анимацию css

Девять простых примеров CSS3 анимации

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Приёмы создания плавной анимации

Современные интернет-пользователи хотят, чтобы открываемые страницы были интерактивными и работали плавно. Страницы должны не только быстро загружаться, но и хорошо работать: прокрутка должна быть быстрой, а анимация и взаимодействия – плавными. Для того чтобы писать производительные сайты и приложения, необходимо понимать, каким образом браузер обрабатывает HTML, JavaScript и CSS. А уже на основе этих знаний писать код так, чтобы он работал как можно эффективнее.

60 кадров в секунду и частота обновления экрана устройства

Большинство устройств обновляют свои экраны 60 раз в секунду. Если выполняется анимация или переход, либо если пользователь прокручивает страницы, браузеру нужно соответствовать частоте обновления экрана устройства и выдавать по одной новой картинке (или кадру) при каждом обновлении экрана.

Каждый из этих кадров может длиться чуть более 16 мс (1 секунда / 60 = 16,66 мс). В реальности же браузеру нужно выполнить ещё некоторые действия, потому вся работа должна занимать не более 10 мс. Если не уложиться в эти рамки, то частота кадров будет меньше, а контент начнёт дёргаться на экране. Часто эту ситуацию называют подвисанием, она отрицательно сказывается на восприятии пользователей.

Конвейер пикселей

frame-full

Рис. 1. Конвейер вывода пикселей на экран

Существует пять основных составляющих, являющихся ключевыми точками конвейера вывода пикселей на экран:

1) JavaScript. Обычно JavaScript используется для выполнения работы, результатом которой будут визуальные изменения, будь то функция jQuery .animate() , сортировка набора данных или добавление DOM-элементов на страницу. Однако вызывать визуальное изменение можно не только с помощью JavaScript — также часто используются анимация CSS, переходы и API-интерфейс веб-анимации.

2) Вычисление стилей (Style). В процессе вычисления стилей определяется, какие правила CSS к каким элементам применяются с учётом соответствующих селекторов, например: .headline или .nav > .nav__item . Поэтому, после того как правила определены, они применяются и вычисляются итоговые стили для каждого элемента.

3) Расчёт макета (Layout). Как только браузер будет знать, какие правила применяются к элементу, он может начать вычислять, сколько места он займёт и где он находится на экране. Модель макета для Интернета означает, что один элемент может влиять на другие, например, ширина элемента <body> обычно влияет на значения ширины дочерних элементов и так далее по всему дереву, поэтому этот процесс для браузера может быть довольно сложным.

4) Прорисовка (Paint). Прорисовка – это процесс заполнения пикселей. Он подразумевает вывод текста, цветов, изображений, границ и теней, по сути – всех визуальных частей элементов. Прорисовка обычно выполняется на нескольких поверхностях, которые называются слоями.

5) Компоновка (Composite). Поскольку части страницы потенциально были прорисованы на нескольких слоях, они должны быть выведены на экран в надлежащем порядке, с тем чтобы страница отображалась правильно. Это особенно важно для элементов, которые перекрывают другие элементы, поскольку ошибка может привести к тому, что один элемент будет неправильно показан поверх другого элемента.

Каждая из этих частей конвейера является потенциальным источником подвисания. Далеко не всегда каждый кадр затрагивает все части конвейера. Существует три варианта, в соответствии с которыми конвейер обычно воспроизводится для данного кадра при внесении визуального изменения – с помощью JavaScript, CSS или веб-анимации.

1. JS / CSS > Стиль > Расчет макета > Прорисовка > Компоновка

frame-full

Рис. 2. Полный конвейер

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

2. JS / CSS > Стиль > Прорисовка > Компоновка

frame-no-layout

Рис. 3. Конвейер без обработки макета

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

3. JS / CSS > Стиль > Компоновка

frame-no-layout-paint

Рис. 4. Конвейер без обработки макета и прорисовки

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

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

Приём 1. Используйте свойства, вызывающие только компоновку, и контролируйте количество слоев

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

1.1. Для достижения анимационного эффекта изменяйте свойства transform и opacity

В самой производительной версии конвейера пикселей отсутствует перерасчёт макета и прорисовка. В ней выполняется только изменение компоновки. Чтобы добиться этого, необходимо изменять только те свойства, которые могут обрабатываться исключительно компоновщиком. На сегодня таких свойств только два &#8212; transform и opacity :

safe-properties

Рис. 5. Свойства transform и opacity

Помните, что для использования свойств transform и opacity элемент, для которого вы изменяете эти свойства, должен находиться на собственном слое. Чтобы создать слой, необходимо переместить на него элемент.

1.2. Перемещайте элементы, которые планируете анимировать, на отдельные слои с помощью will-change или translateZ

Элементы, которые планируется анимировать, следует переносить на отдельные слои (в пределах разумного, не злоупотребляя этим):

Либо, для старых браузеров или тех, которые не поддерживают свойство will-change :

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

1.3. Управляйте слоями и избегайте слишком большого их количества

Слои зачастую позволяют повысить производительность, поэтому может возникнуть соблазн разместить все элементы страницы на собственных слоях:

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

1.4. Используйте Chrome DevTools для анализа слоев в своем приложении

Чтобы понять, как работают слои в приложении и почему элемент размещен на отдельном слое, необходимо включить средство профилирования прорисовки на шкале времени Chrome DevTools:

paint-profiler-toggle

Рис. 6. Прорисовка в инструментах разработчика Chrome

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

frame-of-interest

Рис. 7. Кадры в инструментах разработчика Chrome

После щелчка кадра в подробных сведениях появится новый элемент – вкладка слоев.

layer-tab

Рис. 8. Слои в инструментах разработчика Chrome

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

layer-view

Рис. 9. Анализ слоёв в инструментах разработчика Chrome

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

Приём 2. Упрощайте и сокращайте области прорисовки

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

2.1. Перемещайте на отдельные слои элементы, которые двигаются или исчезают с экрана

Прорисовка не всегда формирует одно изображение в памяти устройства. При необходимости браузер может сформировать несколько изображений или слоев для компоновки.

layers

Рис. 10. Слои в компоновке

Преимущество этого подхода состоит в том, что элементы, которые регулярно заново прорисовываются или двигаются на экране с помощью свойств transform , можно обрабатывать, не затрагивая другие элементы. Это тоже самое, что и работа с графикой в Sketch, GIMP или Photoshop, где отдельные слои можно обрабатывать и располагать друг на друге для создания итогового изображения. Лучший способ создания новых слоев – это использование свойства CSS will-change . Такой способ работает в Chrome, Opera и Firefox. Для браузеров, которые не поддерживают это свойство, но будут работать быстрее, если создавать слои, таких как Safari и Mobile Safari, необходимо воспользоваться (немного неправильно) трёхмерным преобразованием для принудительного формирования нового слоя:

Однако не следует создавать слишком много слоёв, поскольку каждый из них занимает место в памяти и требует управления. Если вы переместили элемент на новый слой, воспользуйтесь DevTools, чтобы убедиться в том, что это дало выигрыш по производительности.

2.2. Сокращайте области прорисовки

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

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

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

2.3. Снижайте сложность прорисовки

При выполнении прорисовки одни операции требуют больше ресурсов, чем другие. Например, всё, что связано с событием blur (тень и т. п.), будет прорисовываться дольше чем, скажем, красный квадрат. Однако для CSS это не всегда очевидно: строки background: red; и box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); не выглядят так, что по производительности они значительно отличаются, но на самом деле это так и есть.

profiler-chartРис. 11. Профилировщик прорисовки

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

2.4. Для быстрого определения проблем с прорисовкой используйте Chrome DevTools

С помощью режима разработки Chrome можно быстро определить области, на которые распространяется прорисовка. Перейдите в режим разработки и нажмите на клавиатуре клавишу Escape. На открывшейся панели перейдите на вкладку прорисовки и установите флажок &#171;Show paint rectangles&#187; (Показать прямоугольники прорисовки):

show-paint-rectangles

Рис. 12. Отображение прорисовки

Когда установлен этот параметр, экран в Chrome будет мигать зеленым каждый раз, когда выполняется прорисовка. Если зеленым мигает весь экран или области экрана, которые предположительно не должны были прорисовываться, то следует провести более детальный анализ.

show-paint-rectangles-green

Рис. 13. Профилировщик прорисовки

Чтобы получить более подробные сведения, необходимо включить профилировщик прорисовки, установив флажок &#171;Paint&#187; вверху окна. Важно, чтобы этот флажок находился в установленном состоянии только при профилировании проблем с прорисовкой, поскольку, когда он установлен, потребляются дополнительные ресурсы и профилирование производительности даст искаженные результаты. Лучше всего использовать это средство, когда вам требуются сведения о том, какие объекты на странице были прорисованы.

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

Рис. 14. Протокол прорисовки

При щелчке профилировщика прорисовки открывается представление, в котором указано, какие объекты подверглись прорисовке, сколько это заняло времени, а также отдельные вызовы прорисовки, которые потребовались:

paint-profiler

Рис. 15. Детализатор прорисовки

Этот профилировщик позволяет определить и область, и сложность прорисовки (фактически это время, которое занимает прорисовка). А это именно те аспекты, которые необходимо исправлять, если избежать прорисовки совершенно невозможно.

Создание плавной последовательной анимации CSS с Sass

Создание плавной последовательной анимации CSS с Sass

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

Пример типов анимации, о которых я сегодня буду вести речь:

Здесь 2 отдельные анимации:

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Прелоадер – когда контент запрошен, но еще не загружен.

Загрузка – контент загружен и последовательно появляется.

CSS анимация

Лично я почти всегда использовал CSS свойство transition для анимации. Переходы – отличная и простая вещь, но они ограничены. CSS свойство animation намного мощнее, но и значительно сложнее.

В CSS анимации есть 2 основных части:

Свойство animation

Animation – это сокращение для ряда свойств анимации (animation-name, animation-duration и т.д.). Обычное правило анимации может выглядеть следующим образом:

Свойство animation сверху применяет анимацию pulse к элементу .tile длительностью 1 секунду с бесконечным повторением и функцией смягчения ease. Здесь мало что происходит, но это лучше видно на практике (подробнее ниже).

Правило @keyframes

Правило @keyframes работает по принципу правила @media: внутрь него вложен CSS. В правиле keyframes содержатся правила стилей, которые применяются к элементу по мере прогресса анимации от 0% до 100%.

Создадим пример с правилом @keyframes:

В нашем примере .tile в первой половине анимации будет затемняться и увеличиваться, после чего вернется в исходное состояние. Анимация будет длиться 1 секунду, как указано в свойстве animation для .tile. Между 0% и 100% можно добавить любое количество процентов.

Префиксы браузеров

К сожалению, в продакшене до сих пор нужно использовать вендорные префиксы –moz и –webkit:

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

Задержка анимации и nth-child

Я буду много использовать свойство animation-delay вместе с селектором nth-child для анимирования группы элементов во временной последовательности. Задержка анимации позволяет применять ее к разным элементам на разных стартовых точках. Так анимация на группе элементов будет похожа на круги на воде.

Наш конечный CSS:

Создание прелоадер анимации с помощью циклов Sass

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

Sass циклы @for

Пример простого Sass цикла for:

Код сверху компилируется в CSS:

Циклы Sass, nth-child и animation-delay

Мы будем использовать цикл for для обращения к nth-child элементу и добавлять задержку к каждой анимации. По мере прохождения цикла будем увеличивать задержку.

В этом примере я использую 9 плейсхолдер элементов, поэтому я установил цикл на 9, а animation-delay основана на 9. Из-за этого у анимации будет постоянный ритм, а девятый nth-child будет иметь задержку 0.5s (половину анимации pulse).

И т.д. Посмотрите демо:

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

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Анимация элементов после загрузки

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

Проигрывание анимации только один раз

Эта анимация будет отличаться от прелоадера, так как она должна запуститься один раз (например, когда элемент появляется в DOM). Будем плавно показывать элемент .tile. Нужно убедиться, что он использует стили из первого keyframe нашей анимации сразу после появления (например, он должен начинаться с opacity: 0).

Также нужно, чтобы после анимации (например, opacity: 1) .tile сохранил стили, объявленные в последнем keyframe анимации.

Самое очевидно, что хочется сделать – задать animation-iteration-count в значение 1. Но к сожалению, все сложнее.

Если число итераций равно 1, элемент начинает со стилей по умолчанию, а затем внезапно принимает стили, объявленные в начале анимации (0%). Далее запускается анимация, но после достижения 100% элемент резко возвращается к первичным стилям.

Из-за этого элемент на экране начинает мигать, резко пропадая и возвращаясь к opacity 100%. Вместе с animation-delay проблема становится еще очевиднее.

Режим заполнения анимации

Для решения описанной выше проблемы разработано свойство animation-fill-mode. animation-fill-mode: both заставляет элемент использовать стили из первого keyframe (0%) анимации сразу, как только применяется анимация (даже если есть animation-delay).

После завершения анимации элемент будет использовать стили из последнего keyframe анимации.

Если ничего непонятно, не переживайте. Если хотите подробнее изучить animation-fill-mode, у Codrops есть полезный разбор.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *