Css Animation
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.
Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами
Пример кода анимации:
move — имя анимации
infinite — бесконечное повторение
linear — тип движения
@keyframes
Animation-name
Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.
animation-name: move; — одна анимация.
animation-name: move, sun-color; — две анимации, имена задаются через запятую.
Animation-duration
Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Animation-timing-function
Плавная анимация
ease — скольжение (значение по умолчанию)
linear — ровное движение
ease-in — ускорение к концу
ease-out — ускорение в начале
ease-in-out — более плавное скольжение, чем ease
cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.
Пошаговая анимация
step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с
step-start изменения происходят в начале шага, а с
steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.
Animation-iteration-count
число — сколько раз проиграть анимацию. infinite — бесконечное повторение.
Animation-direction
normal — анимация проигрывается в обычном направлении, с начала и до конца.
reverse — анимация проигрывается в обратном направлении, то есть с конца.
alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении.
alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.
Animation-play-state
running — анимация проигрывается (значение по умолчанию).
paused — анимация застывает на первом шаге.
Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover :
Animation-delay
Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Animation-fill-mode
none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние.
forwards — анимация воздействует на элемент по окончании воспроизведения.
backwards — анимация воздействует на элемент до начала воспроизведения.
both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.
Все эти свойства можно записать с помощью короткой записи, например:
Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.
Анимация элементов в CSS. Часть 2.
В этой статье мы продолжим изучать нюансы применения анимации, изучим такие возможности CSS как приостановка анимации, направление анимации, рассмотрим как указать стиль для элемента, когда анимация не воспроизводится, разберем как грамотно применять универсальное свойство для создания анимации, подключим и научимся использовать библиотеку Animate.css.
Рис. 196а Пример покадровой анимации.
Обращаю Ваше внимание на то, что для изучения этого материала Вам понадобятся знания, которые необходимо получить в предыдущей статье «Анимация в CSS. Часть 1».
Состояние анимации
Следующее простое свойство, которое мы рассмотрим animation-play-state
, оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:
Перейдем к рассмотрению примера:
В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.
При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state, анимация возобновляется, когда курсор покидает элемент.
Результат нашего примера:
Рис. 197 Пример приостановки и запуска анимации.
Направление анимации
CSS свойство animation-direction определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими свойствами допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).
Ниже представлены возможные значения для настройки направления анимации:
| Значение | Описание |
|---|---|
| normal | Каждый раз, когда цикл анимации завершён, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию. |
| reverse | Анимация воспроизводиться в обратном направлении. |
| alternate | Анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5. ) и как reverse каждый четный раз (2, 4, 6. ). |
| alternate-reverse | Анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5. ) и как normal каждый четный раз (2, 4, 6. ). |
Перейдем к рассмотрению примера:
В этом примере мы создали простую анимацию, в которой с помощью CSS свойства top смещаем элементы с относительным позиционированием относительно верхнего края текущей позиции, изменяя при этом цвет заднего фона элемента.
С использованием селектора класса и свойства animation-direction мы указали различные значения, которые определяют возможные направления для анимации.
Результат нашего примера:
Рис. 198 Направление анимации в CSS.
Стиль для элемента, когда анимация не воспроизводится
CSS свойство animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку, установленную свойством animation-delay).
Ниже представлены возможные значения для настройки этого свойства:
Перейдем к рассмотрению примера:
В этом примере мы создали анимацию продолжительностью 5 секунд (animation-duration), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delay).
С использованием селектора класса и свойства animation-fill-mode мы указали различные значения, которые определяют стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку):
Результат нашего примера:
Рис. 199 Пример использования свойства animation-fill-mode.
Универсальное свойство animation
Мы с Вами рассмотрели все возможные свойства анимации, введенные в CSS 3, это нам было необходимо для того, чтобы мы могли грамотно использовать универсальное свойство animation, которое позволяет задать все эти свойства анимации в одном объявлении, ведь набирать их по отдельности, как правило, затруднительно.
Давайте перед тем как перейдем к примерам, повторим свойства, которые мы рассмотрели:
Обратите внимание на важный момент, порядок свойств в списке соответствует необходимому порядку указания значений в свойстве animation. Имя анимации может быть указано как в начале списка, так и в его конце.
Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, так как значение по умолчанию у этого свойства равно нулю.
Перейдем к примеру:
В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции, изменяя при этом цвет заднего фона и форму границ элемента (свойство border-radius).
С использованием универсального свойства animation мы указали следующие параметры анимации:
Результат нашего примера:
Рис. 200 Пример использования универсального свойства animation.
Рассмотрим следующий пример в котором
В этом примере мы создали несколько анимаций, в которых с помощью свойства transform происходит сдвиг вложенных элементов
Результат нашего примера:
Рис. 201 Пример анимации загрузки.
В этих статьях мы не стали рассматривать сложные примеры анимаций, зачастую их создание занимает длительное время, и подобные примеры выйдут из формата первичного изучения CSS. В заключение этой статьи, хочу познакомить Вас с библиотекой Animate.css, которая существует и используется на протяжении длительного времени. В некоторых случаях её использование позволит вам сэкономить значительное количество времени при установке той, или иной анимации.
Использование библиотеки Animate.css
Библиотека Animate.css представляет из себя по большому счету файл css стилей, который содержит набор ключевых кадров для кроссбраузерной анимации с применением различных эффектов (набор CSS свойств) и набор классов для их воспроизведения. Библиотека содержит набор таких эффектов как изменение прозрачности элемента, эффекты для привлечения внимания, эффекты поворота, появления и исчезновения, увеличения и уменьшения, и многие другие.
Посмотреть все возможные анимации вы можете на сайте проекта, там же доступна к скачиванию минимизированная версия стилей (стили без пробелов и переносов строк). Кроме того, в репозитории GitHub автора проекта вы сможете скачать для изучения, или использования не сжатую версию CSS стилей библиотеки Animate.css. Давайте перейдем в репозиторий и скачаем его содержимое (кнопка «Clone or Download»). На этапе изучения Вам понадобится из скачанного архива только файл animate.css (не сжатая версия).
Чтобы использовать эту библиотеку, достаточно скопировать этот файл стилей в папку с Вашим документом и подключить с использованием тега :
Давайте рассмотрим простую анимацию из библиотеки, которая измененяет прозрачность элемента:
Эти ключевые кадры с помощью свойства opacity позволяют изменить прозрачность элемента с полностью прозрачного до непрозрачного состояния.
Но этого пока недостаточно, чтобы запустить интересующую Вас анимацию библиотеки Animate.css. Для того, чтобы запустить анимацию Вы можете, но не обязаны, воспользоваться следующими созданными автором проекта классами:
Обращаю Ваше внимание, что вы можете создать свои классы, которые будут контролировать процесс анимации. Как правило, добавление классов тому, или иному элементу происходит с использованием языка JavaScript в зависимости от действий пользователя, или каких-то определенных событий. Мы с Вами рассмотрим пример в котором будем использовать только классы из библиотеки Animate.css и установим анимацию только с использованием каскадных таблиц стилей.
Перейдем к рассмотрению примера:
Результат нашего примера:
Рис.202 Пример анимации с использованием библиотеки Animate.CSS.
Использование CSS-анимации
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS-анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.
Есть три преимущества CSS-анимации перед традиционными способами:
Конфигурирование анимации
Свойство animation имеет следующие подсвойства:
Определение последовательности анимации с помощью ключевых кадров
Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.
Примеры
Скольжение текста
Этот простой пример анимирует скольжение текста в элементе
от правого края окна браузера.
В стиле для элемента
можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.
Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок
приплывает к левому краю окна браузера.
(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)
Добавление других ключевых кадров
Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.
(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)
Настройка повторения
Движение текста вправо и влево
Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :
Использование шорткодов
Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:
Внимание: подробнее об этом на странице раздела animation
Установка нескольких значений свойствам анимации
CSS-свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.
В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:
Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.
В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.
Использование событий анимации
Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.
Добавление CSS
Добавление обработчика события анимации
Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.
Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.
Регистрация событий
Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:
Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:
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 примеры и готовый код
Для создания анимации применяются свойства CSS transition и animation Рассмотрим их подробно с примерами.
Элементы анимации не только делают дизайн удобнее и элегантнее, но и вызывают у пользователей положительные эмоции, которые буквально притягивают к сайту.
Это что касается пользовательских показателей.
Что же касается веб-разработки — анимация оживляет элементы контента средствами CSS, без привлечения JavaScript, что хорошо для мобильных устройств.
Должен предупредить — прежде чем браться за анимацию элементов, нужно познакомиться с основами HTML и CSS
Рассмотрим их по порядку.
transition
Свойство transition применяется для создания простых анимаций, то есть оно создаёт эффект перехода между двумя состояниями элемента.
transition в свою очередь можно разделить на 4 составляющие, каждая из которых влияет на определённый аспект эффекта перехода.
1. transition-property — определяет свойство, которое будет анимироваться. Например если элемент будет сдвигаться, то это будут свойства top, left, margin и т. п., менять размер, то width или height, менять цвет — color или background.
2. transition-duration — продолжительность эффекта перехода. Задаётся в секундах.
3. transition-timing-function — скорость эффекта перехода. Принимает следующие значения:
ease — анимация медленно начинается, затем ускоряется и к концу опять замедляется;
ease-in — медленно начинается, а к концу ускоряется;
ease-out — быстро начинается, а к концу замедляется;
ease-in-out — замедление в начале и в конце;
linear — постоянная скорость;
cubic-bezier — задаёт все значения в числовом выражении. Например значение ease записывается так: cubic-bezier(0.25,0.1,0.25,1).
4. transition-delay — задержка начала анимации. Задается в секундах. Например анимация может начаться через определённое время после загрузки страницы.
В сокращённом варианте запись анимации выглядит следующим образом — в свойстве transition задаются все вышеперечисленные значения по порядку через пробел.
Пример в котором элемент будет перемещаться при наведении на него курсора.
animation и @keyframes
Свойство animation и правило @keyframes применяются для создания анимации любой сложности.
Свойство animation задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes задаётся сама анимация по шагам (изменения вида и положения)
Свойство animation включает в себя восемь составляющих:
2. animation-duration — длительность анимации, задаётся в секундах (s) или миллисекундах (ms).
3. animation-timing-function — определяет тип анимации и принимает следующие значения:
linear — ровное движение;
ease-out — ускорение в начале;
ease-in — ускорение в конце;
ease-in-out — более плавное скольжение, чем ease
cubic-bezier — задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров — cubic-bezier.com
step-start и step-end — задаёт пошаговую анимацию (счётчик)
4. animation-iteration-count — задаёт число повторений анимации. Принимает значения:
любое число — сколько раз повторяется анимация;
infinite — бесконечное повторение;
5. Animation-direction — задаёт направление движения. Принимает значения:
normal — движение слева на право;
reverse — движение справа на лево;
alternate — полный цикл туда и обратно;
alternate-reverse — полный цикл, но начинается и заканчивается с конца;
6. animation-play-state — задаёт остановку анимации. Принимает значения:
running — анимация проходит нормально (по умолчанию);
paused — анимация замирает на первом шаге;
7. animation-delay — задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms)
8. animation-fill-mode — позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения:
none — анимация в работает только в заданном времени воспроизведения, потом возвращается на место.
forwards — анимация продолжается после окончания времени воспроизведения;
backwards — анимация начинается до начала воспроизведения;
both — анимация работает и до начала и после окончания времени воспроизведения;
Некоторые из этих свойств поначалу могут показаться абсурдными, но при создании сложных анимаций они позволяют реализовать смелые творческие решения.
Все свойства можно записать в сокращённом виде, указав в свойстве animation только их значения. Например:
Правило @keyframes — второй шаг в создании сложной анимации.
Внутри этого правила создается поэтапное воспроизведение преобразований происходящих с элементом.
На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes внутрь которого помещаются селекторы последовательно определяющие состояние элемента.
Например, возьмём элемент
@keyframes nev <
from < /* От */
opacity : 0 ; /* полная прозрачность */
>
to < /* До */
opacity : 1 ; /* полная непрозрачность */
>
>
Селекторами from и to задаётся преобразование от одного состояния элемента до другого.
Но гораздо удобнее задавать изменение состояния в процентах. Тогда число селекторов можно увеличить, и тем самым разбить процесс на большее число этапов.
Каждому этапу при этом можно задать что-то своё. Например продолжительность, границу, размер и т.п.
50% <
opacity : 0.5;
border-radius : 30% ;
>
100% <
opacity : 1 ;
border-radius : 0 ;
>
>
Пример появления и исчезновения квадрата:
20% <
opacity : 0.2 ;
border-radius : 40% ;
>
50% <
opacity : 0.5 ;
border-radius : 30% ;
>
100% <
opacity : 1 ;
border-radius : 0 ;
>
>
/style >
/head >
body >
div > /div >
/body >
/html >
Надеюсь основы создания анимации понятны. Теперь, когда Вам известны свойства, значения и инструменты, открывайте Notepad++ и творите от простого к сложному.
В следующей статье «CSS перемещение, вращение, 3D» подробно разберём свойство transform, очень часто применяющееся в анимациях.
