8.1 Właściwość animation-iteration-count
Animacje CSS umożliwiają tworzenie dynamicznych efektów wizualnych, poprawiając interfejs użytkownika. Teraz
przyjrzymy się dwóm kluczowym właściwościom, które kontrolują pętle animacji: animation-iteration-count i animation-direction.
Właściwość animation-iteration-count określa, ile razy będzie odtwarzana animacja. Ta właściwość pozwala
kontrolować, czy animacja będzie odtwarzana jeden raz, kilka razy, czy nieskończenie.
Składnia:
element {
animation-iteration-count: number | infinite;
}
Gdzie:
number: liczba odtworzeń animacji (na przykład, 1, 2, 3, itd.)infinite: animacja będzie odtwarzana nieskończenie
Przykład:
<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;
}
Wyjaśnienie kodu:
@keyframes bounce: określa animację, która unosi element w górę i następnie przywraca go do pierwotnej pozycjianimation-iteration-count: infinite: ustawia nieskończone odtwarzanie animacji
8.2 Właściwość animation-direction
Właściwość animation-direction określa kierunek odtwarzania animacji. Pozwala ona określić,
czy animacja będzie odtwarzana w kierunku normalnym, odwrotnym, czy naprzemiennie w obu kierunkach.
Składnia:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Gdzie:
normal: animacja jest odtwarzana w kierunku normalnym (domyślnie)reverse: animacja jest odtwarzana w kierunku odwrotnymalternate: animacja przełącza się między kierunkiem normalnym i odwrotnymalternate-reverse: animacja zaczyna się od kierunku odwrotnego, następnie przełącza się między kierunkami odwrotnym i normalnym
Przykład
Odtwarzanie normalne i odwrotne:
<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;
}
Wyjaśnienie kodu:
.box1: animacja jest odtwarzana w kierunku normalnym.box2: animacja jest odtwarzana w kierunku odwrotnym
Naprzemienne kierunki:
<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;
}
Wyjaśnienie kodu:
.box1: animacja przełącza się między kierunkiem normalnym i odwrotnym.box2: animacja zaczyna się od kierunku odwrotnego, następnie przełącza się między kierunkami odwrotnym i normalnym
8.3 Przykład użycia obu właściwości
Element kołyszący
- Ten przykład demonstruje kołyszący element, który porusza się w prawo i lewo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kołyszący element</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>
Wyjaśnienie kodu:
@keyframes swing: określa animację, która obraca element.box: element z zastosowaną animacjąswing, czasem trwania 1 sekundy, nieskończonym odtwarzaniem i początkiem od kierunku odwrotnego
GO TO FULL VERSION