8.1 Свойство animation-iteration-count
CSS-анимации позволяют создавать динамичные визуальные эффекты, улучшая пользовательский интерфейс. Сейчас мы рассмотрим два ключевых свойства, которые контролируют циклы анимаций: animation-iteration-count и animation-direction.
Свойство animation-iteration-count определяет, сколько раз будет воспроизводиться анимация. Это свойство позволяет контролировать, будет ли анимация проигрываться один раз, несколько раз или бесконечно.
Синтаксис:
element {
animation-iteration-count: number | infinite;
}
Где:
number: количество воспроизведений анимации (например, 1, 2, 3, и т. д.)infinite: анимация будет воспроизводиться бесконечно
Пример:
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Объяснение кода:
@keyframes bounce: определяет анимацию, которая поднимает элемент вверх и затем возвращает его в исходное положениеanimation-iteration-count: infinite: устанавливает бесконечное воспроизведение анимации
8.2 Свойство animation-direction
Свойство animation-direction определяет направление воспроизведения анимации. Оно позволяет указать, будет ли анимация воспроизводиться в прямом направлении, обратном направлении или чередовать оба направления.
Синтаксис:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Где:
normal: анимация воспроизводится в прямом направлении (по умолчанию)reverse: анимация воспроизводится в обратном направленииalternate: анимация чередуется между прямым и обратным направлениямиalternate-reverse: анимация начинается с обратного направления, затем чередуется между обратным и прямым направлениями
Пример
Прямое и обратное воспроизведение:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Объяснение кода:
.box1: анимация воспроизводится в прямом направлении.box2: анимация воспроизводится в обратном направлении
Чередование направлений:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Объяснение кода:
.box1: анимация чередуется между прямым и обратным направлениями.box2: анимация начинается с обратного направления, затем чередуется между обратным и прямым направлениями
8.3 Пример использования обоих свойств
Качающийся элемент
- Этот пример демонстрирует качающийся элемент, который перемещается вправо и влево:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Качающийся элемент</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Объяснение кода:
@keyframes swing: определяет анимацию, которая поворачивает элемент.box: элемент с примененной анимациейswing, продолжительностью в 1 секунду, бесконечным воспроизведением и началом с обратного направления
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ