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

Основы CSS: Анимация Сайтостроение

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

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

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

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

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

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

CSS

123456789101112131415.ball {  border-radius: 50%;  width: 200px;  height: 200px;  background-color: pink;  border: 2px solid #000;  animation: bounce 1s infinite alternate;}@keyframes bounce {  from {    margin-top: 0;  }  to {    margin-top: -250px;  }}

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

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

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

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

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

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

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

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

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

READ
Шпаргалка по импорту и экспорту ES6

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

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

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

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

CSS

12345678910.ball {     animation-name: grow;  animation-duration: 2s;   animation-timing-function: ease-out;   animation-delay: 0;  animation-direction: alternate;  animation-iteration-count: infinite;  animation-fill-mode: none;  animation-play-state: running;  }

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

CSS

1234567891011.ball {     animation:     grow    2s         ease-out         0s         alternate         infinite         none         running; }

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

CSS

1234567891011121314@keyframes grow {  0% {    transform: scale(.5);    background-color: yellow;    border-radius: 100%;  }  50% {    background-color: purple;  }  100% {    transform: scale(1.5);    background-color: pink;  }}

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

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

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

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

CSS

READ
Реактивное (react) гамбургер-меню
12345.ball {  animation:     colorswap 2s linear infinite alternate,     movement 6s ease-out infinite alternate;}

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

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

CSS

123456789101112131415161718192021.element {  -webkit-animation: YOUR-KEYFRAME-NAME 1s infinite;  -moz-animation:    YOUR-KEYFRAME-NAME 1s infinite;  -o-animation:      YOUR-KEYFRAME-NAME 1s infinite;  animation:         YOUR-KEYFRAME-NAME 1s infinite;}@-webkit-keyframes YOUR-KEYFRAME-NAME {  0%   { /* … */ }  100% { /* … */ }}@-moz-keyframes YOUR-KEYFRAME-NAME {  0%   { /* … */ }  100% { /* … */ }}@-o-keyframes YOUR-KEYFRAME-NAME {  0%   { /* … */ }  100% { /* … */ }}@keyframes YOUR-KEYFRAME-NAME {  0%   { /* … */ }  100% { /* … */ }}

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

Автор: Timothy Robards

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

Источник

Оценить статью
Блог о самом интересном.