БлогСфера

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

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

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

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

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

CSS .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, чтобы повторять анимацию до бесконечности.

Краткий обзор возможностей новой версии WordPress

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

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

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

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

CSS .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 .ball { animation: grow 2s ease-out 0s alternate infinite none running;

}

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

CSS @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 .ball { animation: colorswap 2s linear infinite alternate, movement 6s ease-out infinite alternate;

}

Почему Google не запускает новый глобальный апдейт?

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

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

CSS .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.

Источник