От автора: CSS-анимация — отличный способ анимировать свойства CSS от одного значения к другому. В то время как мы можем использовать переходы для выполнения отдельных движений, анимация дает нам намного более тонкий контроль.
Некоторые общие свойства, которые мы можем анимировать, включают цвета (color и background-color) и числа, такие как height и width. Ознакомьтесь с полным списком анимируемых свойств CSS.
Создание анимации
Анимация состоит из правила стиля, описывающего анимацию, и набора ключевых кадров, указывающих начальное и конечное состояния этого стиля. Мы также можем по желанию добавить точки пути. Давайте рассмотрим пример:
Наша анимация определяется с помощью свойства animation, а его движение — с помощью @keyframes следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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, чтобы повторять анимацию до бесконечности.
animation-fill-mode: Устанавливает, какие значения применяются до и после выполнения анимации. Например, вы можете настроить анимацию, чтобы она оставалась на экране после завершения, или вернуться в исходное состояние.
animation-play-state: Позволяет приостановить и возобновить последовательность анимации.
Давайте рассмотрим другой пример:
Здесь мы используем следующие значения:
|
1 2 3 4 5 6 7 8 9 10 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 |
.ball { animation: grow 2s ease-out 0s alternate infinite none running; } |
В нашем примере ключевые кадры установлены так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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.
Работа с несколькими анимациями
Множественные анимации могут быть объявлены в селекторе с использованием значений через запятую. В следующем примере мы устанавливаем цвета для замены с помощью одного правила ключевого кадра и перемещаем его из стороны сторону с помощью другого:
|
1 2 3 4 5 |
.ball { animation: colorswap 2s linear infinite alternate, movement 6s ease-out infinite alternate; } |
Примечание о префиксах
Современные браузеры теперь широко поддерживают свойства анимации, поэтому нам не нужно беспокоиться о вендорных префиксах. В том случае, когда мы хотим поддерживать старые браузеры. Нам нужно убедиться, что у нас есть соответствующие префиксы, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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
Источник: //itnext.io
Редакция: Команда webformyself.
