CSS-анимации
CSS позволяет создавать простые анимации без использования JavaScript.
JavaScript может быть использован для управления такими CSS-анимациями. Это позволяет делать более сложные анимации, используя небольшие кусочки кода.
CSS-переходы
Идея CSS-переходов проста: мы указываем, что некоторое свойство должно быть анимировано, и как оно должно быть анимировано. А когда свойство меняется, браузер сам обработает это изменение и отрисует анимацию.
Всё что нам нужно, чтобы начать анимацию – это изменить свойство, а дальше браузер сделает плавный переход сам.
Например, CSS-код ниже анимирует трёх-секундное изменение background-color :
.animated
Теперь, если элементу присвоен класс .animated , любое изменение свойства background-color будет анимироваться в течение трёх секунд.
Нажмите кнопку ниже, чтобы анимировать фон:
Существует 4 свойства для описания CSS-переходов:
- transition-property – свойство перехода
- transition-duration – продолжительность перехода
- transition-timing-function – временная функция перехода
- transition-delay – задержка начала перехода
Далее мы рассмотрим их все, а сейчас ещё заметим, что есть также общее свойство transition , которое позволяет задать их одновременно в последовательности: property duration timing-function delay , а также анимировать несколько свойств одновременно.
Например, у этой кнопки анимируются два свойства color и font-size одновременно:
Теперь рассмотрим каждое свойство анимации по отдельности.
transition-property
В transition-property записывается список свойств, изменения которых необходимо анимировать, например: left , margin-left , height , color .
Анимировать можно не все свойства, но многие из них. Значение свойства all означает «анимируй все свойства».
transition-duration
В transition-duration можно определить, сколько времени займёт анимация. Время должно быть задано в формате времени CSS: в секундах s или миллисекундах ms .
transition-delay
В transition-delay можно определить задержку перед началом анимации. Например, если transition-delay: 1s , тогда анимация начнётся через 1 секунду после изменения свойства.
Отрицательные значения также допустимы. В таком случае анимация начнётся с середины. Например, если transition-duration равно 2s , а transition-delay – -1s , тогда анимация займёт одну секунду и начнётся с середины.
Здесь приведён пример анимации, сдвигающей цифры от 0 до 9 с использованием CSS-свойства transform со значением translate :
stripe.onclick = function() < stripe.classList.add('animate'); >;#digit < width: .5em; overflow: hidden; font: 32px monospace; cursor: pointer; >#stripe < display: inline-block >#stripe.animate
Кликните на цифру для начала анимации: Свойство transform анимируется следующим образом:
#stripe.animate
В примере выше JavaScript-код добавляет класс .animate к элементу, после чего начинается анимация:
stripe.classList.add('animate');Можно начать анимацию «с середины», с определённого числа, например, используя отрицательное значение transition-delay , соответствующие необходимому числу.
Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:
stripe.onclick = function() < let sec = new Date().getSeconds() % 10; stripe.style.transitionDelay = '-' + sec + 's'; stripe.classList.add('animate'); >;#digit < width: .5em; overflow: hidden; font: 32px monospace; cursor: pointer; >#stripe < display: inline-block >#stripe.animate
Click below to animate: JavaScript делает это с помощью нескольких строк кода:
stripe.onclick = function() < let sec = new Date().getSeconds() % 10; // например, значение -3s здесь начнут анимацию с третьей секунды stripe.style.transitionDelay = '-' + sec + 's'; stripe.classList.add('animate'); >;transition-timing-function
Временная функция описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот.
На первый взгляд это очень сложное свойство, но оно становится понятным, если уделить ему немного времени.
Это свойство может принимать два вида значений: кривую Безье или количество шагов. Давайте начнём с кривой Безье, как с наиболее часто используемой.
Кривая Безье
Временная функция может быть задана, как кривая Безье с 4 контрольными точками, удовлетворяющими условиям:
- Первая контрольная точка: (0,0) .
- Последняя контрольная точка: (1,1) .
- Для промежуточных точек значение x должно быть 0..1 , значение y может принимать любое значение.
Синтаксис для кривых Безье в CSS: cubic-bezier(x2, y2, x3, y3) . Нам необходимо задать только вторую и третью контрольные точки, потому что первая зафиксирована со значением (0,0) и четвёртая – (1,1) .
Временная функция описывает то, насколько быстро происходит анимации во времени.
- Ось x – это время: 0 – начальный момент, 1 – последний момент transition-duration .
- Ось y указывает на завершение процесса: 0 – начальное значение свойства, 1 – конечное значение.
Самым простым примером анимации является равномерная анимация с линейной скоростью. Она может быть задана с помощью кривой cubic-bezier(0, 0, 1, 1) .
Вот как выглядит эта «кривая»:
…Как мы видим, это прямая линия. Значению времени ( x ) соответствует значение завершённости анимации ( y ), которое равномерно изменяется от 0 к 1 .
В примере ниже поезд «едет» слева направо с одинаковой скоростью (нажмите на поезд):
.train
В свойстве transition указана следующая кривая Безье:
.train < left: 0; transition: left 5s cubic-bezier(0, 0, 1, 1); /* JavaScript устанавливает свойство left равным 450px */ >…А как показать замедляющийся поезд?
Мы можем использовать другую кривую Безье: cubic-bezier(0.0, 0.5, 0.5 ,1.0) .
Как видим, анимация начинается быстро: кривая быстро поднимается вверх, и затем все медленнее и медленнее.
Ниже временная функция в действии (нажмите на поезд):
.train
.train < left: 0; transition: left 5s cubic-bezier(0, .5, .5, 1); /* JavaScript устанавливает свойство left равным 450px */ >Есть несколько встроенных обозначений кривых Безье: linear , ease , ease-in , ease-out и ease-in-out .
linear это короткая запись для cubic-bezier(0, 0, 1, 1) – прямой линии, которую мы видели раньше.
Другие названия – это также сокращения для других cubic-bezier :
* – используется по умолчанию, если не задана другая временная функция.
Для того, чтобы замедлить поезд, мы можем использовать ease-out :
.train < left: 0; transition: left 5s ease-out; /* transition: left 5s cubic-bezier(0, .5, .5, 1); */ >Но получившийся результат немного отличается.
Кривая Безье может заставить анимацию «выпрыгивать» за пределы диапазона.
Контрольные точки могут иметь любые значения по оси y : отрицательные или сколь угодно большие. В таком случае кривая Безье будет скакать очень высоко или очень низко, заставляя анимацию выходить за её нормальные пределы.
В приведённом ниже примере код анимации:
.train < left: 100px; transition: left 5s cubic-bezier(.5, -1, .5, 2); /* JavaScript sets left to 400px */ >Свойство left будет анимироваться от 100px до 400px .
Но когда вы нажмёте на поезд, вы увидите следующее:
- Сначала, поезд поедет назад: left станет меньше, чем 100px .
- Затем он поедет вперёд, немного дальше, чем 400px .
- И затем вернётся назад в значение 400px .
.train
Если мы взглянем на кривую Безье из примера, становится понятно поведение поезда.
Мы вынесли координату y для первой опорной точки ниже нуля и выше единицы для третьей опорной точки, поэтому кривая вышла за пределы «обычного» квадрата. Значения y вышли из «стандартного» диапазона 0..1 .
Как мы знаем, ось y измеряет «завершённость процесса анимации». Значение y = 0 соответствует начальному значению анимируемого свойства и y = 1 – конечному значению. Таким образом, y1 – больше конечного.
Это, конечно, «мягкий» вариант. Если значение y будут -99 и 99 , то поезд будет гораздо сильнее «выпрыгивать» за пределы.
Как сделать кривую Безье необходимую для конкретной задачи? Существует множество инструментов.
- К примеру, мы можем сделать это на сайте https://cubic-bezier.com.
- Браузернные инструменты разработчика также имеют специальную поддержку для создания кривых Безье в CSS:
- Откройте инструменты разработчика при помощи F12 (Mac: Cmd + Opt + I ).
- Выберете вкладку Elements , затем обратите внимание на под-панель Styles в правой стороне.
- Свойства CSS со словом cubic-bezier будут иметь иконку перед этим словом.
- Кликните по иконке, чтобы отредактировать кривую.
Шаги
Временная функция steps(количество шагов[, start/end]) позволяет разделить анимацию на шаги.
Давайте рассмотрим это на уже знакомом нам примере с цифрами.
Ниже представлен список цифр, без какой-либо анимации, который мы будем использовать в качестве основы:
Виды анимации на верстке: свойства, особенности, примеры кода
Frontend-разработчик нашей компании Данила Абрамов рассказывает, как оптимизировать анимации и делать их плавными. В статье разберем CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.
Данила объяснит, что происходит в браузере, когда мы запускаем анимацию и каким образом браузер перерисовывает все эти кадры, а также поделится основными правилами для успешной работы анимаций.
Виды анимаций
Самые простые и распространённые виды анимаций — CSS Transition и CSS Animation.
CSS Transition
Transition — это сокращённое CSS-свойство, которое позволяет управлять плавным переходом между двумя состояниями элемента.
Свойство Transition состоит из:
- transition-property — название свойства, к которому применяется эффект перехода.
- transition-duration — длительность перехода.
- transition-timing-function — временную функцию перехода (то, как будут определены промежуточные значения для свойства, которое участвует в переходе).
- transition-delay — задержку перед началом перехода.
button:hover
Плюсы: Это наилучший способ (с точки зрения простоты и быстродействия), когда есть всего два состояния элемента в зависимости от одного условия. Например, при наведении мышкой, при нажатии на элемент, и т. п.
Минусы: transition не позволяет изменять свойства элемента, если состояний больше, чем два. Также невозможно делать бесконечные анимации.
Особенности: в значении свойства transition можно указывать как отдельные CSS-свойства со своими значениями, так и использовать ключевое слово all. Оно скажет браузеру использовать переход для всех свойств, которые есть внутри CSS-правила.
CSS Animation
Animation — сокращённое CSS-свойство, включающее в себя:
- animation-name — название.
- animation-duration — длительность.
- animation-timing-function — временную функцию (по аналогии с transition-timing-function).
- animation-delay — задержку перед началом.
- animation-iteration-count — количество повторений.
- animation-direction — направление (можно запустить анимацию наоборот, начиная с конца).
- animation-fill-mode — то, как будут применяться стили ключевых кадров до и после окончания анимации.
- animation-play-state — свойство, которое позволяет поставить анимацию на паузу и продолжить с того места, на котором она остановилась.
Чтобы создать анимацию, нужно описать директиву @keyframes с названием анимации и описанием ключевых кадров:
@keyframes shift < 10% < transform: translate3d(0, 0, 0); >20% < transform: translate3d(-20px, 0, 0); >50% < transform: translate3d(10px, 0, 0); >75% < transform: translate3d(-7px, 0, 0); >100% < transform: translate3d(0, 0, 0); >>Для того, чтобы использовать эту анимацию, достаточно добавить к элементу свойство animation с названием анимации и её опциями:
element.is-animated < animation: shift 1700ms linear 1000ms infinite;В следующем простом примере при клике на элемент в JS добавляется и удаляется класс .is-animated, что включает и выключает анимацию
Плюсы: свойство animation позволяет делать сложные, повторяющиеся анимации и более точно управлять состоянием анимации через подробное описание ключевых кадров.
Минусы: если есть какие-то сложные сцены, которые используют много анимаций, включающихся подряд, то создание анимации с помощью animation становится сложным. Также сложно будет это поддерживать.
Особенности: чтобы применить анимацию к элементу, достаточно указать всего два значения: имя и длительность анимации. При этом порядок значений практически не важен. Важно только то, что первое значение времени — это длительность, а второе — задержка перед началом анимации.
Описывая следующие виды анимаций, я не буду вдаваться в подробности их реализации. Каждый из них — отдельный, огромный мир, который заслуживает нескольких больших статей. Расскажу про основные моменты, которые их отличают, где и для чего они используются, и приведу несколько примеров, чтоб вы могли наглядно увидеть как они работают, в чём их плюсы и минусы.
SVG animation
SVG можно анимировать двумя способами: с помощью CSS-анимации SMIL-анимации.
Анимация SVG с помощью CSS ничем не отличается от обычной animation. Мы также с помощью @keyframes создаём анимацию, описываем в ней свойства, которые изменяем, и используем её при необходимости.
- если в SVG что-то не получилось анимировать с помощью CSS-анимации,
- или нужно устанавливать зависимости между разными анимациями (например, запустить вторую анимацию через 3 секунды после того, как закончится первая анимация),
- либо нужно плавно превратить один вид SVG в другой, во всех этих (и некоторых других) случаях необходимо использовать SMIL-анимацию для SVG.
Так выглядит простая SMIL-анимация движения круга по клику мышки:
1) Анимация SMIL + CSS. На CSS анимируется изменение цвета и перемещение фигуры, с помощью SMIL фигура изменяет свой контур.
2) Здесь анимация полностью сделана с помощью SMIL
3) Ещё один пример морфинга (изменение контура SVG)
Плюсы:
- SMIL анимация будет работать даже если вам нужно вставить SVG с помощью тега img, либо через background-image в CSS.
- С помощью SMIL анимации можно анимировать те атрибуты, которые не доступны для CSS-анимации. Например, анимировать точки в теге , чтоб создать эффект плавного перехода от одной фигуры к другой.
Минусы: По сути SMIL-анимация — это отдельная спецификация со своими правилами и тонкостями, которую необходимо изучать отдельно от CSS.
Особенности: У SMIL-анимации очень много тонкостей, знать которые можно только если вплотную занимаешься именно этим видом анимации.
JS-Анимация
Говоря простым языком, это плавное изменение стилей элемента через JavaScript. С помощью JS анимации можно контролировать все стили элемента на любом этапе анимации, менять их в зависимости от любых условий. С помощью чистого JS делаются анимации переключения слайдов, раскрытие-закрытие аккордеона, различные перемещения блоков по определённым условиям, и многое многое другое.
1) Довольно необычный слайдер
2) Анимация эффекта при движении мышкой
Плюсы: Анимация с помощью JavaScript позволяет сделать то, на что не способна CSS-анимация. Можно как угодно манипулировать элементами. Также в любом месте анимации её можно замедлять, приостанавливать, и т.п.
Минусы: JS-анимация часто более ресурсозатратна для браузеров.
Особенности:
- если написать JS-анимацию неправильно, то есть большой шанс, что на слабых устройствах она будет тормозить. Как этого избежать поговорим ниже.
- для JS-анимаций есть большое количество готовых библиотек (например, anime.js), которые позволяют создавать анимации быстрее и эффективнее (особенно сложные), нежели писать их руками.
JS canvas
Canvas — это холст. То есть всего лишь один тег в html-коде. При создании анимации внутри canvas все изменения происходят внутри одного тега. Всё, что находится внутри canvas, не существует в DOM-дереве. Но с помощью JS мы можем создавать, перемещать и изменять любые элементы, которые будут находиться в canvas.
Плюсы: при создании анимации внутри canvas браузеру не нужно постоянно изменять и пересчитывать всю страницу, расположение элементов относительно друг от друга, и т.п.
Минусы: как и все предыдущие виды анимаций, canvas позволяет реализовать только 2D-графику.
1) Анимация снегопада
2) Игра змейка на canvas
JS. WebGL / ThreeJs
WebGL — технология, которая добавляет в браузер 3D-графику. Самая популярная библиотека для работы с WebGL (на данный момент) — three.js. Она существенно упрощает порог вхождения в технологию WebGL. Благодаря поддержке 3d, с помощью three.js часто делаются браузерные 3d игры.
- На этом сайте приведены примеры игр, созданных с помощью three.js
- Земля (шар), на которой есть интерактивные точки. При нажатии на точки открываются описания.
Плюсы: это единственная возможность создавать полноценную 3D-анимацию в браузере.
Минусы: даже учитывая, что three.js оптимизирует анимацию, чаще всего анимация на three.js — это огромная нагрузка на браузер, и на средних и слабых компьютерах анимация будет тормозить.
Как работают анимации в браузере
Что происходит в браузере, когда мы запускаем анимацию? Каким образом браузер перерисовывает все эти кадры? Какие процессы происходят кроме просто перерисовки стилей? Зная ответы на эти вопросы, можно грамотно оптимизировать анимацию.
Вот 5 основных этапов, которые проходит браузер во время анимации:
1) JavaScript. Браузер смотрит влияние JavaScript на стили на странице.
2) Style. Из CSS для каждого элемента рассчитываются стили, которые отвечают за внешний вид (размеры, отступы, цвета).
3) Layout. Браузер рассчитывает местоположение каждого элемента относительно друг друга. А также как они влияют друг на друга.
На всех этих этапах браузер не отрисовывает элементы. Он всего лишь считывает их характеристики.
4) Paint. На данном этапе уже прорисовываются все элементы. Каждый пиксель каждого элемента.
5) Composite. Происходит проверка, какой элемент на какой наложился сверху. Например, снизу фон, а поверх него остальные элементы.
Все 5 этапов проходят по умолчанию при загрузке страницы.
Во время анимации в браузере могут быть три варианта:
- Все эти 5 этапов проходят тогда, когда мы изменяем CSS-свойства, которые рассчитываются на процессоре (CPU) и влияют на размеры элемента, его местоположение, внешние и внутренние отступы. Это худший вариант.
- Если мы изменяем свойства, которые не влияют на расположение элемента (фон, тени, цвет, и т. п.), то браузер проходит 4 этапа — 1, 2, 4, 5 (без третьего, одного из самых затратных, — этапа Layout).
- Лучшим вариантом анимаций с точки зрения работы браузера будет вариант, когда мы проходим только 1, 2, и 5 этап. (без этапов Layout и Paint). Это возможно, если использовать свойства opacity и transform. opacity — это просто прозрачность, а transform фиксирует область за элементом, и для него перестаёт просчитываться взаимодействие с другими элементами. Это позволяет не перерисовывать всю страницу.
Основные правила для успешной работы анимаций
Самая сложная и важная часть веб-анимации — добиться её плавности. То есть сделать так, чтоб количество кадров анимации приблизилось к 60 fps. Существует множество факторов, которые влияют на плавность анимации — это и мощность устройства, и размеры экрана, и количество пикселей на экране, и многое другое.
Приведу несколько способов оптимизации анимаций.
- С transition лучше не использовать ключевое слово all, а задавать конкретные свойства, поскольку в CSS-правиле в дальнейшем могут добавиться другие свойства, переход между которыми нам не нужен. Также, когда используется ключевое all, браузер проходит по всем свойствам в CSS-правиле, определяя, какие можно анимировать, а какие нет. Это создаёт лишнюю нагрузку, что незначительно, но всё же влияет на быстродействие анимации.
- Использовать свойства, изменение которых не заставляет браузер перерисовывать всю страницу, особенно всё, что относится к размерам.
- Выносить анимированные элементы на отдельный слой, чтобы анимация происходила за с помощью видеокарты. (transform: translateZ(0); или transform: translate3d(0, 0, 0); )
- использовать свойство will-change, которое заранее говорит браузеру о тех свойствах, которые будут анимированы. При этом браузер оптимизирует анимацию, и, если нужно, то переносит рендеринг видеокарту. (Не следует использовать для простой анимации, чтоб не путать браузер на что нужно, а на что не стоит тратить особенное внимание).
- Если элемент визуально отсутствует на странице после или до анимации, то необходимо его скрыть с помощью display: none или visibility: hidden, для того, чтоб освободить ресурсы браузера. Это полностью выключит считывание событий и считывание анимаций.
- Если анимаций много, то лучше запускать их последовательно. Лучше для этого не использовать delay, потому что это равнозначно одновременному запуску нескольких анимаций, что съедает ресурсы.
- При начале разработки анимацию следует тестировать на разных, особенно слабых, устройствах. Если анимация тормозит, можноизменить подход или как-то оптимизировать анимацию. Если же это тестировать в конце, то возможно придётся всё переписывать, что увеличит время разработки.
- Если используем JS-анимацию, то обязательно нужно использовать функцию window.requestAnimationFrame(). В коде это выглядит так:
function step() < // код функции, который анимирует элемент window.requestAnimationFrame(step); >window.requestAnimationFrame(step);Эта функция вызывается браузером каждый раз, когда он приступает к пересчёту местоположения всех элементов, пересмотру влияния JS, то есть когда проходит полный рендер. В идеальных условиях это 60 раз в секунду. Но интервалы между этими вызовами рассчитываются браузером, и зависят от нагрузки на устройство, от заряда батареи и т.п. Благодаря тому, что браузер сам вызывает эту функцию, когда ему нужно, оптимизируется быстродействие анимации.
- Всегда просить коллег посмотреть и саму анимацию, и код, для того, чтобы можно было что-то оптимизировать. При долгой работе над анимациями замыливается глаз. Очень важен взгляд со стороны.
Итог
Хочу обратить особенное внимание на то, что при создании веб-анимации важно думать о том, как с этим будет работать браузер, что именно он будет делать. Например, сколько раз и за какое время он будет вызывать события для запуска анимации. И о том, насколько анимация затрагивает перерисовку блоков или даже всей страницы. За счёт каких ресурсов компьютера будет исполняться код (CPU или GPU). По возможности не стоит переусложнять анимацию. Чем проще анимация, тем она производительнее. Анимация должна быть украшением, но никак не мешать пользователям пользоваться сайтом или приложением.
Инструментов для написания веб-анимации много. Очень важно использовать каждый из них именно для тех задач, для которых они подходят лучше всего.
- анимация
- анимация скролла
- анимация фрагментов
- анимация прототипов
Мини-туториал по анимации в CSS и HTML5
Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.
За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.
В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.
Свойство animation может быть использовано для анимации других свойств CSS, таких как цвет фона, высота, длинна, положение элемента и многие другие.
Давайте рассмотрим пример, где мы меняем цвет фона у элемента.
Создадим в HTML элемент с классом «element»:
В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.
@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >> Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.
Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:
.element
Результат данной анимации будет выглядеть так:
Мы можем контролировать анимацию при помощи дополнительных свойств.
В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).
Существует несколько свойств анимации. Рассмотрим каждый из них:
- animation-name: имя анимации определенным правилом keyframes
- animation-duration: сколько времени займет один цикл анимации от 0% до 100%
- animation-timing-function: определяет кривые ускорения, такие как ease и linear
- animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
- animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
- animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
- animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
- animation-play-state: проигрывает/ставит на паузу анимацию
Свойства анимации указываются таким образом:
.element
Все эти свойства можно записать и одной строкой:
.element
Свойства анимации могут принимать значения, указанные в таблице:
Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:
@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >> HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.
Добавим новый блок keyframes
@keyframes move < 0% < margin-left: 0px; >100% < margin-left: 200px; >> Перечислим анимации через запятую
animation: changeColor 3s infinite, move 4s infinite alternate; Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.
Практические примеры
Теперь давайте рассмотрим более практические примеры применения CSS анимации, которые используются в веб страницах и веб приложениях.
Анимация спиннера загрузки
Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.
В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.
@keyframes rotate < from to > Далее мы использовали эту анимацию в списке стилей для элемента:
animation: rotate 1.5s infinite linear Анимированная форма авторизации
Давайте создадим что-то посложнее. Например анимированную форму авторизации.
Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.
Login Username Password Submit Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.
Добавим статические стили в CSS, чтобы наша форма выглядела красиво:
html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover
Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.
Добавим 4 блока keyframes с правилами анимации:
@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >> Как видно, мы будем использовать 4 анимации по одной для каждого . Наши элементы будут двигаться по очереди вверх, вниз, влево, вправо, создавая иллюзию беспрерывного вращения вокруг кнопки.
Добавим теперь эту анимацию каждому элементу:
.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)
Как видите, мы добились стильной анимации, используя только HTML и CSS.
Заключение
В данной статье мы рассмотрели, как использовать анимацию CSS и HTML без использования JavaScript. Инструментарий предоставляемый CSS очень гибкий: можно использовать его для создания большого количество разных анимаций, где лимитом будет только ваше воображение и здравый смысл. Вот здесь можно посмотреть различные креативные CSS анимации для вдохновения.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
Использование CSS-анимации
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS-анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.
Есть три преимущества CSS-анимации перед традиционными способами:
- Простота использования для простых анимаций; вы можете создать анимацию, не зная JavaScript.
- Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
- Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.
Конфигурирование анимации
Чтобы создать CSS-анимацию вы должны добавить в стиль элемента, который хотите анимировать, свойство animation или его подсвойства. Это позволит вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет вам настроить внешний вид анимации, который настраивается с помощью @keyframes (en-US), рассматриваемой далее в Определение последовательности анимации с помощью ключевых кадров.
Свойство animation имеет следующие подсвойства:
Определяет имя @keyframes (en-US), настраивающего кадры анимации.
Определяет время, в течение которого должен пройти один цикл анимации.
Настраивает ускорение анимации.
Настраивает задержку между временем загрузки элемента и временем начала анимации.
Определяет количество повторений анимации; вы можете использовать значение infinite для бесконечного повторения анимации.
Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
Настраивает значения, используемые анимацией, до и после исполнения.
Позволяет приостановить и возобновить анимацию.
Определение последовательности анимации с помощью ключевых кадров
После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после @keyframes (en-US). Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.
Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.
Примеры
Примечание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.
Скольжение текста
Этот простой пример анимирует скольжение текста в элементе от правого края окна браузера.
Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow : hidden .
p animation-duration: 3s; animation-name: slidein; > @keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > >
В стиле для элемента с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes (en-US), описывающей саму анимацию, определено как "slidein".
Ключевые кадры определяются с помощью правила @keyframes (en-US). В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации ( from ). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок находится за пределами правого края окна браузера .
Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок приплывает к левому краю окна браузера.
p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p>
(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)
Добавление других ключевых кадров
Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возвращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:
75% font-size: 300%; margin-left: 25%; width: 150%; >
p animation-duration: 3s; animation-name: slidein; > @keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > 75% font-size: 300%; margin-left: 25%; width: 150%; > >
p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p>
Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.
(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)
Настройка повторения
Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:
p animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; >
@keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > >
p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p>
Движение текста вправо и влево
Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :
p animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; >
@keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > >
p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p>
Использование шорткодов
Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:
p animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; >
можно заменить на:
p animation: 3s infinite alternate slidein; >
Примечание: подробнее об этом на странице раздела animation
Установка нескольких значений свойствам анимации
CSS-свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.
В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:
animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; animation-iteration-count: 1;
Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.
animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5;
В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.
animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1;
Использование событий анимации
Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом AnimationEvent (en-US), можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.
Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.
Добавление CSS
Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах @keyframes (en-US) установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.
.slidein -moz-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; animation-direction: alternate; > @-moz-keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > > @-webkit-keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > > @keyframes slidein from margin-left: 100%; width: 300%; > to margin-left: 0%; width: 100%; > >
Добавление обработчика события анимации
Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.
var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); e.className = "slidein";
Это довольно стандартный код; вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.
Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.
Регистрация событий
События будут передаваться функции listener() , показанной ниже.
function listener(e) var l = document.createElement("li"); switch (e.type) case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; > document.getElementById("output").appendChild(l); >
Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события, и добавляет элемент , чтобы залогировать произошедшее событие.
Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:
- Started: elapsed time is 0
- New loop started at time 3.01200008392334
- New loop started at time 6.00600004196167
- Ended: elapsed time is 9.234000205993652
Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .
HTML
Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:
body> h1 id="watchme">Watch me moveh1> p> This example shows how to use CSS animations to make code>pcode> elements move across the page. p> p> In addition, we output some text each time an animation event fires, so you can see them in action. p> ul id="output">ul> body>
Смотрите также
- AnimationEvent
- Определение поддержки CSS-анимации
- Использование CSS-переходов (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.