для такого свойства css как keyframe animation
Анимация CSS через keyframes, без воды и максимально просто
В этой статье будет про то как работает CSS анимация с использованием keyframes, всё написанное здесь, будет максимально простым, понятным и без воды.
Также надо сказать, что здесь не будет показываться наглядно что в итоге получилось использовав тот или иной код, но вы сможете его внизу скачать и поэкспериментировать с ним.
Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.
Базовая работа с @keyframes:
Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.
Суть работы с @keyframes:
Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».
Свойства «animation-…» для @keyframes:
Этих свойств очень много и применяются они к элементу, который вы хотите анимировать, сначала покажу только самые основные.
Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.
Пример работы с @keyframes:
Для примера будет показан блок div, виде квадрата, с помощью анимации будем его изменять, как его создавать в HTML показывать не буду, если вы читаете эту статью, думаю вы уже умеете это делать.
CSS же очень простой, сначала пишем стили для блока, что бы он выглядел как блок, потом уже и сами настройки анимации.
Разбор кода:
Давайте теперь разберем, что тут написано, первые три строчки свойств для нашего квадрата, это размер и цвет блока.
Потом задаём времени и сколько раз должно проигрываться, там используется параметр infinite, что значит проигрывать анимацию бесконечно, ну и в конце задаётся имя анимации.
Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.
В from задаётся начальные свойства элемента, на которую используется анимация, но задавать его не обязательно, также это слово можно заменить, просто написав вместо него 0%.
Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%.
В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.
Более подробная работа с @keyframes:
В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.
Ещё больше свойств «animation-…» для @keyframes:
Теперь я показал на мой взгляд самые важные свойства, но ниже будут ещё, которые могут пригодится.
Пример более продвинутой работы с @keyframes:
Почти точно такой же блок div мы создаём и работаем с ним.
Использование 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. Множественные анимации
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
Анимация: keyframes
Анимация допустима для любого свойства CSS, физическое положение, размеры, угол или цвет которого могут быть изменены. Использовать базовую анимацию на основе ключевых кадров очень легко.
Ключевые кадры CSS-анимации задаются с помощью директивы @keyframes. Ключевой кадр — это просто состояние элемента в одной точке на временной шкале анимации. CSS-анимация будет автоматически интерполировать анимационные ключевые кадры. Нужно лишь указать состояние свойств CSS в начальной и конечной точках анимации.
Как только все положения ключевых кадров настроены (часто указываются в процентах), всё, что нужно сделать, — это установить значения по умолчанию для исходного элемента, который вы хотите анимировать.
В анимации могут использоваться ключевые слова from и to, которым соответствуют значения 0% и 100%.
Задавать свойства анимации можно отдельно или сразу в одной строке.
При создании @keyframes анимации очень часто на определённых этапах у отдельных свойств используются одни и те же значения. Чтобы не растягивать длинный список из контрольных точек, можно просто записать их через запятую.
На данный момент поддержка составляет более 89.5%, и во всех браузерах @keyframes и свойство animation работают без префиксов. Тем не менее, для обратной поддержки Safari 8 и iOS 8.4 и ниже вам придётся использовать префикс –webkit.
Замена цвета
Вы можете добавить промежуточный цвет. Таких шагов может быть много.
Изменение формы
Если изменение цвета недостаточно, можно добавить изменение формы фигуры.
Пульсация элемента формы
Комбинация box-shadow и keyframes даёт замечательный эффект подсветки формы, когда элемент оказывается в фокусе. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:
Прыгающий мячик
Сделаем пример анимации перемещения — при наведении на мячик он начинает прыгать.
Создадим ключевые кадры:
Сначала мы задаём имя анимации — «bounce». Затем мы описываем ключевые кадры анимации:
Анимация с задержкой между итерациями
К примеру, нам нужно, чтобы анимация длилась одну секунду с задержкой в 4 секунды перед повтором.
Свойство animation-delay не поможет. Свойство задерживает первый старт анимации, после чего она выполняется непрерывно.
Для решения задачи нужно воспользоваться математикой. Нужно, чтобы анимация длилась одну секунду, затем сделать задержку в 4 секунды между итерациями, в сумме получается 5 секунд.
Теперь наша @keyframes-анимация будет длиться 5 секунд:
Чтобы анимация длилась 1 секунду, нужно вносить изменения каждую 1/5 времени или 20%.
Можно сократить код, так как значение 0% заранее подразумевается, а этапы анимации можно перечислить через запятую:
Свойство animation
Свойство animation является сокращённой записью восьми свойств:
Правило @keyframes
Структура правила выглядит следующим образом:
Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:
Но это самый простой пример. Как мы уже говорили, можно создавать более двух ключевых кадров, что гораздо более интересно. Давайте модифицируем наш пример, добавив еще один ключевой кадр в середину анимации, чтобы фоновый цвет сначала менялся с красного на желтый, а затем с желтого на зеленый:
Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.
Разумеется, можно указывать в одном кадре несколько CSS-свойств. Например, чтобы сместить наш элемент вниз на 50 пикселей к середине анимации, и еще на 50 пикселей — к концу анимации, следует записать:
Еще более интересно то, что можно создавать паузы в анимации, записывая один набор свойств для нескольких ключевых кадров сразу. Например, чтобы красный цвет сменился на желтый к 33% от длительности анимации, а переход от желтого к зеленому начался после 66%, запишите следующее:
Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.
Ключевые слова from и to равнозначны процентным записям 0% и 100% соответственно. Вам не обязательно начинать анимацию с 0% и заканчивать на 100%. Ее можно запускать позже и завершать раньше, при этом добиваясь интересных эффектов.
Кроссбраузерность
Далее в учебнике: свойства для запуска анимации — animation-name и animation-duration.