От автора: как работает анимация CSS: работа со свойством animation, основной синтаксис, настройка параметров, примеры использования — об этом в статье.
Анимация CSS применяется к элементу с помощью свойства animation.
|
1 2 3 |
.container { animation: spin 10s linear infinite; } |
spin — это имя анимации, которое мы должны определить отдельно. Мы также указываем CSS выполнять анимацию последние 10 секунд, выполнять ее линейным образом (без ускорения или какой-либо разницы в скорости) и повторять ее бесконечно.
Вы должны определить, как работает анимация, используя ключевые кадры. Вот пример анимации, которая вращает элемент:
|
1 2 3 4 5 6 7 8 |
@keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } |
Внутри определения @keyframes вы можете задать столько промежуточных точек, сколько захотите. В этом случае мы указываем CSS, чтобы свойство transform поворачивало ось Z от 0 до 360 градусов, завершая полный цикл. Вы можете использовать любое преобразование CSS.
Обратите внимание, что здесь не сказано ничего о временном интервале анимации. Это определяется, когда вы используете animation.
Пример CSS-анимации
Я хочу нарисовать четыре круга, все с общей исходной точкой, все повернутые на 90 градусов друг относительно друга.
|
1 2 3 4 5 6 |
<div class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
body { display: grid; place-items: center; height: 100vh; } .circle { border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 12.5em); transform-origin: 50% 12.5em; width: 12.5em; height: 12.5em; position: absolute; box-shadow: 0 1em 2em rgba(0, 0, 0, .5); } .one, .three { background: rgba(142, 92, 205, .75); } .two, .four { background: rgba(236, 252, 100, .75); } .one { transform: rotateZ(0); } .two { transform: rotateZ(90deg); } .three { transform: rotateZ(180deg); } .four { transform: rotateZ(-90deg); } |
Вы можете видеть их в этом блоке Glitch:
Давайте сделаем эту структуру (все круги) вращающимися. Для этого мы применяем к контейнеру анимацию, и определяем эту анимацию как поворот на 360 градусов:
|
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } .container { animation: spin 10s linear infinite; } |
Посмотрите сюда:
Вы можете добавить больше ключевых кадров для создания более интересной анимации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@keyframes spin { 0% { transform: rotateZ(0); } 25% { transform: rotateZ(30deg); } 50% { transform: rotateZ(270deg); } 75% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); } } |
Пример:
Свойства CSS-анимации
CSS-анимация предоставляет множество различных параметров, которые вы можете настроить:
animation-name — имя анимации, которое ссылается на анимацию, созданную с использованием ключевых кадров
animation-duration — как долго анимация должна длиться, в секундах
anim-timing-function — функция синхронизации, используемая анимацией (общие значения: linear, ease). По умолчанию: ease
animation-delay — необязательное количество секунд до начала анимации
animation-iteration-count — сколько раз анимация должна выполняться. Принимает число или infinite. По умолчанию: 1
animation-direction — направление анимации. Может быть normal, reverse, alternate или alternate-reverse. В последних 2 случаях чередуется вперед, а затем назад
animation-fill-mode — определяет, как задавать стили элемента, когда анимация заканчивается, после того, как закончится последняя итерация. None или backwards возвращают к стилям первого ключевого кадра. Forwards и both задают стили, установленные в последнем ключевом кадре
анимация-play-state — если установлено paused, приостанавливает анимацию. По умолчанию running.
Свойство animation является сокращением всех этих свойств в следующем порядке:
|
1 2 3 4 5 6 7 8 9 10 |
.container { animation: name duration timing-function delay iteration-count direction fill-mode play-state; } |
Это пример, который мы использовали выше:
|
1 2 3 |
.container { animation: spin 10s linear infinite; } |
События JavaScript для CSS-анимации
Используя JavaScript, вы можете прослушивать следующие события:
animationstart
animationend
animationiteration
Будьте осторожны с анимацией, потому что, если анимация начинается при загрузке страницы, то код JavaScript всегда выполняется после обработки CSS. Затем уже будет запущена анимация, и вы не сможете перехватить событие.
|
1 2 3 4 5 6 7 8 9 10 |
const container = document.querySelector('.container') container.addEventListener('animationstart', (e) => { //делаем что-то }, false) container.addEventListener('animationend', (e) => { // делаем что-то }, false) container.addEventListener('animationiteration', (e) => { // делаем что-то }, false) |
Я написал книгу о Современной Fron-tend разработке, включающую разделы, посвященные React, Redux, GraphQL, современному CSS, Progressive Web Apps, Webpack, Babel, Service Workers, Fetch, Web Push Notifications и многому другому. Ознакомьтесь с ней!
Автор: Flavio Copes
Источник: //medium.freecodecamp.org/
Редакция: Команда webformyself.
