Основы CSS: Анимация

Основы CSS: Анимация

От автора: CSS-анимация — отличный способ анимировать свойства CSS от одного значения к другому. В то время как мы можем использовать переходы для выполнения отдельных движений, анимация дает нам намного более тонкий контроль.

Некоторые общие свойства, которые мы можем анимировать, включают цвета (color и background-color) и числа, такие как height и width. Ознакомьтесь с полным списком анимируемых свойств CSS.

Создание анимации

Анимация состоит из правила стиля, описывающего анимацию, и набора ключевых кадров, указывающих начальное и конечное состояния этого стиля. Мы также можем по желанию добавить точки пути. Давайте рассмотрим пример:

Наша анимация определяется с помощью свойства animation, а его движение — с помощью @keyframes следующим образом:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Наш элемент перемещается между различными начальными и конечными позициями (в этом случае мы скорректировали поле).

Под-свойства

Есть ряд под-свойств, с которыми мы можем работать, чтобы получить больше контроля:

animation-name: Указывает имя правила @keyframes, которое описывает ключевые кадры анимации.

animation-duration: Устанавливает продолжительность времени, которое анимация должна выполняться для завершения одного цикла.

animation-timing-function: Определяет время анимации; или как оно «течет» по ключевым кадрам.

animation-delay: Устанавливает задержку между временем загрузки элемента и началом анимации.

animation-direction: Устанавливает направление анимации после цикла.

animation-iteration-count: Устанавливает количество повторений анимации. Мы можем использовать infinite, чтобы повторять анимацию до бесконечности.

animation-fill-mode: Устанавливает, какие значения применяются до и после выполнения анимации. Например, вы можете настроить анимацию, чтобы она оставалась на экране после завершения, или вернуться в исходное состояние.

animation-play-state: Позволяет приостановить и возобновить последовательность анимации.

Давайте рассмотрим другой пример:

Здесь мы используем следующие значения:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы могли бы упростить это, используя шорткод animation:

В нашем примере ключевые кадры установлены так:

Как уже упоминалось, мы можем использовать точки пути @keyframes для дальнейшего управления анимацией. Они устанавливаются в процентах, 0% — начало анимации, а 100% — конец.

В нашем примере у нас есть начальное состояние (0%), для которого настроен масштаб .5 и yellow, затем на 50% пути мы меняем цвет на purple, а при 100% он масштабируется до 1,5 и становится pink.

Работа с несколькими анимациями

Множественные анимации могут быть объявлены в селекторе с использованием значений через запятую. В следующем примере мы устанавливаем цвета для замены с помощью одного правила ключевого кадра и перемещаем его из стороны сторону с помощью другого:

Примечание о префиксах

Современные браузеры теперь широко поддерживают свойства анимации, поэтому нам не нужно беспокоиться о вендорных префиксах. В том случае, когда мы хотим поддерживать старые браузеры. Нам нужно убедиться, что у нас есть соответствующие префиксы, например:

Спасибо за прочтение!

Автор: Timothy Robards

Источник: https://itnext.io

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: