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 секунду, нескінченним відтворенням і початком зі зворотного напрямку
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ