CSS-анимации
CSS позволяет создавать простые анимации без использования JavaScript.
JavaScript может быть использован для управления такими CSS-анимациями. Это позволяет делать более сложные анимации, используя небольшие кусочки кода.
CSS-переходы
Идея CSS-переходов проста: мы указываем, что некоторое свойство должно быть анимировано, и как оно должно быть анимировано. А когда свойство меняется, браузер сам обработает это изменение и отрисует анимацию.
Всё что нам нужно, чтобы начать анимацию – это изменить свойство, а дальше браузер сделает плавный переход сам.
Например, CSS-код ниже анимирует трёх-секундное изменение background-color :
Нажмите кнопку ниже, чтобы анимировать фон:
Существует 4 свойства для описания CSS-переходов:
Например, у этой кнопки анимируются два свойства color и font-size одновременно:
Теперь рассмотрим каждое свойство анимации по отдельности.
transition-property
Анимировать можно не все свойства, но многие из них. Значение свойства all означает «анимируй все свойства».
transition-duration
transition-delay
Здесь приведён пример анимации, сдвигающей цифры от 0 до 9 с использованием CSS-свойства transform со значением translate :
Свойство transform анимируется следующим образом:
Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:
JavaScript делает это с помощью нескольких строк кода:
transition-timing-function
Временная функция описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот.
На первый взгляд это очень сложное свойство, но оно становится понятным, если уделить ему немного времени.
Это свойство может принимать два вида значений: кривую Безье или количество шагов. Давайте начнём с кривой Безье, как с наиболее часто используемой.
Кривая Безье
Временная функция может быть задана, как кривая Безье с 4 контрольными точками, удовлетворяющими условиям:
Временная функция описывает то, насколько быстро происходит анимации во времени.
Вот как выглядит эта «кривая»:
В примере ниже поезд «едет» слева направо с одинаковой скоростью (нажмите на поезд):
CSS3 — анимация
Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after
Поддержка браузерами
Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:
Правило @keyframes
Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.
Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.
Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.
При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).
Мы создали анимацию, которая работает следующим образом:
[codepen_embed height=»268″ theme_id=»0″ slug_hash=»ONgOQY» default_tab=»result» user=»AmateR»]See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.[/codepen_embed]
Здесь и далее для удобства я написал в примерах несколько строчек JavaScript, которые будут поочередно добавлять или удалять класс с анимацией на элементе, поэтому для воспроизведения анимации просто кликните по этому элементу.
Ключевые кадры можно группировать:
Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:
Название анимации
Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.
Длительность анимации
Временная функция
Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте.
Визуальное сравнение
[codepen_embed height=»380″ theme_id=»0″ slug_hash=»VaWyjN» default_tab=»result» user=»AmateR»]See the Pen VaWyjN by Aleksei (@AmateR) on CodePen.[/codepen_embed]
Анимация с задержкой
Повтор анимации
Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.
Направление анимации
Свойство animation-direction задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.
[codepen_embed height=»317″ theme_id=»0″ slug_hash=»bpRaLq» default_tab=»result» user=»AmateR»]See the Pen bpRaLq by Aleksei (@AmateR) on CodePen.[/codepen_embed]
Проигрывание анимации
Свойство animation-play-state позволяет управлять проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте (JavaScript). Также можно останавливать анимацию при наведении курсором мыши на объект (состояние :hover ). Не наследуется.
Пример (при наведении на элемент анимация останавливается):
[codepen_embed height=»227″ theme_id=»0″ slug_hash=»ONgOQY» default_tab=»result» user=»AmateR»]See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.[/codepen_embed]
Состояние элемента до и после воспроизведения анимации
Свойство animation-fill-mode определяет в каком состоянии будет элемент до начала анимации и после её завершения.
[codepen_embed height=»254″ theme_id=»0″ slug_hash=»NNgyPX» default_tab=»result» user=»AmateR»]See the Pen NNgyPX by Aleksei (@AmateR) on CodePen.[/codepen_embed]
2.22. CSS3-анимация
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
Введение в CSS-анимацию
Поддержка браузерами
See the Pen square loader by Elena Nazarova (@nazarelen) on CodePen.
1. Ключевые кадры
Ключевые кадры используются для указания значений свойств анимации в различных точках анимации. Ключевые кадры определяют поведение одного цикла анимации; анимация может повторяться ноль или более раз.
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100% ) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.
Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.
1.1. Временная функция для ключевых кадров
Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.
2. Название анимации: свойство animation-name
Свойство animation-name определяет список применяемых к элементу анимаций. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.
Если несколько анимаций пытаются изменить одно и то же свойство, то выполнится анимация, ближайшая к концу списка имен.
Свойство не наследуется.
| animation-name | |
|---|---|
| Значения: | |
| none | Означает отсутствие анимации. Также используется, чтобы отменить анимацию элемента из группы элементов, для которых задана анимация. Значение по умолчанию. |
| имя анимации | Имя анимации, которое связывает правило @keyframes с селектором. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
3. Продолжительность анимации: свойство animation-duration
Свойство не наследуется.
4. Временная функция: свойство animation-timing-function
Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.
Свойство не наследуется.
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
5. Повтор анимации: свойство animation-iteration-count
Свойство не наследуется.
| animation-iteration-count | |
|---|---|
| Значения: | |
| infinite | Анимация проигрывается бесконечно. |
| число | Анимация будет повторяться указанное количество раз. Если число не является целым числом, анимация закончится в середине последнего цикла. Отрицательные числа недействительны. Значение 0 вызывает мгновенное срабатывание анимации. |
6. Направление анимации: свойство animation-direction
Свойство не наследуется.
| animation-direction | |
|---|---|
| Значения: | |
| normal | Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию. |
| reverse | Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены. |
| alternate | Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении. |
| alternate-reverse | Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
7. Проигрывание анимации: свойство animation-play-state
Свойство не наследуется.
| animation-play-state | |
|---|---|
| Значения: | |
| running | Анимация выполняется. Значение по умолчанию. |
| paused | Анимация приостанавливается. При перезапуске анимация начинается с того места, где она была остановлена, как если бы «часы», управляющие анимацией, остановились и снова запустились. Если анимация остановлена во время задержки, при повторном воспроизведении время задержки также возобновляется. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
See the Pen EjRagd by Elena Nazarova (@nazarelen) on CodePen.
8. Задержка анимации: свойство animation-delay
Свойство не наследуется.
9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
Свойство не наследуется.
10. Краткая запись анимации: свойство animation
11. Множественные анимации
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
Анимация интерфейсов с помощью CSS
Front End Developer
Чем ближе мы приближаемся к началу работы интерфейса, тем понятней он становится для пользователя. В жизни практически ничего не происходит мгновенно — открывая банку газировки или закрывая глаза перед сном мы наблюдаем кучу промежуточных состояний, а не резкое “открыто/закрыто”, как это происходит в веб.
В своей статье поделюсь знаниями о анимации CSS и как с ней работать. Анимация придаёт сайтам динамичность и улучшает понимание их возможностей. Она оживляет веб-страницы и помогает взаимодействовать с пользователем. В отличие от переходов CSS3, анимация CSS базируется на ключевых кадрах. Которые позволяют воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла автоматически.
Анимация — это набор ключевых кадров или кейфреймов хранящихся в CSS:
Помните, если начальный или конечный кадры не указаны, браузер определит их автоматически, будто к ним не была применена анимация.
Подключить анимацию к элементу можно так:
К одному элементу (селектору) можно применить по несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:
Свойство animation-delay задает задержку перед воспроизведением анимации в секундах или миллисекундах:
Повторное воспроизведение анимации:
Используя animation-iteration-count мы можем указывать число повторов анимации: 0, 1, 2, 3, и т.д. Или infinite для зацикливания:
Состояние элемента до и после анимации:
При помощи свойства animation-fill-mode возможно указывать, в каком состоянии элемент будет находиться до начала анимации и после завершения:
animation-fill-mode: forwards; — элемент анимации будет находиться в состоянии последнего кейфрейма после завершения/воспроизведения;
a nimation-fill-mode: backwards; — элемент будет находиться в состоянии первого кейфрейма;
Запуск и остановка анимации:
Свойство animation-direction, указывает на то, как управлять направлением воспроизведения анимации. Вот возможные значения:
animation-direction: normal; — анимация воспроизводится в прямом порядке;
animation-direction: reverse; — анимация воспроизводится в обратном порядке, от to к from;
Функция плавности вывода анимированных кадров:
Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. По умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас у нас существуют следующие предопределенные значения: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.
Однако вы можете создавать такие функции самостоятельно. Значение animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y) ; принимает на вход 4 аргумента и строит кривую распределения процесса анимации.
Изучить подробнее или опробовать создание этих функций можно на сайте http://cubic-bezier.com
И, наконец, анимацию можно разбить на набор отдельных значений (шагов) при помощи функции steps которая принимает на вход количество шагов и направление ( start или end ). На примере ниже анимация состоит из 5 шагов, последний из которых произойдёт прямо перед завершением анимации:
Поддержка браузеров для анимации:
Значения в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Во-вторых, гибкость, скоростью и простота внедрения CSS анимаций поможет “вдохнуть жизнь” в существующие или новые интерфейсы. Разработав общие и оригинальные подходы, разобравшись в особенности технологии можно делать уникальные юзабилити интерфейсы почти для всех проектов.
Надеюсь, в статье вы нашли полезную информацию для себя. Всем красивых сайтов. Не забывайте про анимашки:)
Анимация в CSS
Мы недавно видели, что переходы — это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в CSS являются специфическим видом анимации, где:
Но что если вы хотите:
Анимация в CSS позволяет всё это, и не только.
Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).
Свойства анимации
Быстрый пример
Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания:
Я использовал сокращенное свойство animation и включил все возможные варианты:
@keyframes
Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров. Вообще, ключевые кадры — это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:
Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.
Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.
Каждый ключевой кадр является правилом CSS, это означает, что вы можете писать свойства CSS как обычно.
Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием:
animation-name
Название анимации используется, по крайней мере, дважды:
Подобно именам классов CSS, название анимации может включать в себя только:
Название не может начинаться с цифры или с двух дефисов.
animation-duration
Как и длительность перехода, длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.
animation-timing-function
Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.
animation-delay
Как и с задержкой перехода, задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
По умолчанию равно 0s, что означает отсутствие любой задержки.
Полезно использовать, когда включается несколько анимаций в серии.
animation-iteration-count
По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:
animation-direction
Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.
animation-fill-mode
Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.
При определении ключевых кадров можно указать правила CSS, которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться с теми, которые уже применяются к анимируемым элементам.
animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации.
Давайте представим себе кнопку, которая является: