От автора: как работает анимация CSS: работа со свойством animation, основной синтаксис, настройка параметров, примеры использования — об этом в статье.
Анимация CSS применяется к элементу с помощью свойства animation.
.container { animation: spin 10s linear infinite;
}
spin — это имя анимации, которое мы должны определить отдельно. Мы также указываем CSS выполнять анимацию последние 10 секунд, выполнять ее линейным образом (без ускорения или какой-либо разницы в скорости) и повторять ее бесконечно.
Вы должны определить, как работает анимация, используя ключевые кадры. Вот пример анимации, которая вращает элемент:
@keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }
}
Внутри определения @keyframes вы можете задать столько промежуточных точек, сколько захотите. В этом случае мы указываем CSS, чтобы свойство transform поворачивало ось Z от 0 до 360 градусов, завершая полный цикл. Вы можете использовать любое преобразование CSS.
Обратите внимание, что здесь не сказано ничего о временном интервале анимации. Это определяется, когда вы используете animation.
Пример CSS-анимации
Я хочу нарисовать четыре круга, все с общей исходной точкой, все повернутые на 90 градусов друг относительно друга.
<div class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> </div>
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 градусов:
@keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }
}
.container { animation: spin 10s linear infinite;
}
Посмотрите сюда:
Вы можете добавить больше ключевых кадров для создания более интересной анимации:
@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 является сокращением всех этих свойств в следующем порядке:
.container { animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
Это пример, который мы использовали выше:
.container { animation: spin 10s linear infinite;
}
События JavaScript для CSS-анимации
Используя JavaScript, вы можете прослушивать следующие события:
animationstart
animationend
animationiteration
Будьте осторожны с анимацией, потому что, если анимация начинается при загрузке страницы, то код JavaScript всегда выполняется после обработки CSS. Затем уже будет запущена анимация, и вы не сможете перехватить событие.
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
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.