@keyframes
Поддержка браузерами
Описание
CSS правило @keyframes позволяет разработчику контролировать промежуточные шаги в последовательности исполнения CSS анимации с помощью создания ключевых кадров (или путевых точек) вдоль последовательности анимации, которые достигаются в определенные моменты времени исполнения анимации. Это дает больше контроля над промежуточными этапами последовательности анимации, чем когда браузер обрабатывает все автоматически.
Для использования ключевых кадров, создается правило @keyframes с именем, которое затем используется в свойстве animation ( или animation-name) для добавления списка ключевых кадров в анимацию. Каждое правило @keyframes содержит список стилей для селекторов ключевых кадров, каждый из которых состоит из процента для анимации, при котором происходит ключевой кадр, и блока кода, содержащего информацию о стиле для этого ключевого кадра.
Перечислять ключевые кадры можно в любом порядке, они все равно будут обрабатываться в том порядке, в котором их указанный процент указывает когда они должны сработать.
Допустимые значения селекторов для ключевых кадров
Чтобы список ключевых кадров был корректным, он должен включать в себя минимум два значения: 0% ( или from) и 100% (или to), то есть начинать и заканчивать цикл анимации. Если оба эти значения не указаны, то все CSS правило считается недопустимым и не может быть использовано для анимации.
Если правило содержит свойства, которые не могут быть анимированы, они будут проигнорированы, но поддерживаемые свойства по-прежнему будут анимироваться.
Значения свойства
| Значение | Описание |
|---|---|
| имя_анимации | Обязательный параметр. Определяет название анимации. |
| селектор-ключевого-кадра | Обязательный параметр. Указывается в процентах от продолжительности анимации. |
0-100%
from (то же, что и 0%)
to (то же, что и 100%)
Анимация: 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 является сокращённой записью восьми свойств:
Использование 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, в который и выводится вся информация:
CSS3 сейчас — анимация, прозрачность и многое другое (часть 2)
Keyframe
В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.
Первум пунктом в создании CSS анимации идёт создание keyframe’ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.
Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:
Теперь создадим ключевые кадры:
Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% < bottom: 0; >— в начале мячик находится на исходной позиции;
50% < bottom: 100px; >— в середине анимации мячик достигает максимальной высоты;
100% < bottom: 0; >— к концу анимации мячик падает на исходное место.
Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:
В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.
Opacity
А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Вот пример полупрозрачной кроссбраузерной кнопки:
Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:
Спасибо за внимание и приятной вам вёрстки!
Анимация 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 мы создаём и работаем с ним.
