8.1 animation-iteration-count xassəsi
CSS-animasiyalar interfeysi yaxşılaşdırmaq üçün dinamik vizual effektlər yaratmağa imkan verir. İndi biz animasiya dövrlərinə nəzarət edən iki əsas xüsusiyyəti nəzərdən keçirəcəyik: animation-iteration-count və animation-direction.
animation-iteration-count xassəsi animasiyanın neçə dəfə icra olunacağını təyin edir. Bu xüsusiyyət animasiyanın bir dəfə, bir neçə dəfə və ya sonsuz olaraq oynayıb-oynamayacağını idarə etməyə imkan verir.
Sinataxis:
element {
animation-iteration-count: number | infinite;
}
Harada:
number: animasiyanın neçə dəfə icra olunacağını göstərir (məsələn, 1, 2, 3 və sair)infinite: animasiya sonsuz olaraq icra olunacaq
Nümunə:
<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;
}
Kodun izahı:
@keyframes bounce: elementi yuxarı qaldıran və sonra onu ilkin vəziyyətinə qaytaran animasiyanı təyin ediranimation-iteration-count: infinite: animasiyanın sonsuz olaraq təkrarlanmasını təyin edir
8.2 animation-direction xassəsi
animation-direction xassəsi animasiyanın icra istiqamətini təyin edir. Bu, animasiyanın birbaşa istiqamətdə, tərs istiqamətdə və ya hər iki istiqaməti növbə ilə icra edilib-edilməyəcəyini göstərməyə imkan verir.
Sintaksis:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Burada:
normal: animasiya birbaşa istiqamətdə icra olunur (default)reverse: animasiya tərs istiqamətdə icra olunuralternate: animasiya birbaşa və tərs istiqamətləri növbələşdiriralternate-reverse: animasiya tərs istiqamətdən başlayır və daha sonra tərs və birbaşa istiqamətləri növbələşdirir
Nümunə
Birbaşa və tərs icra:
<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;
}
Kodun izahı:
.box1: animasiya birbaşa istiqamətdə icra olunur.box2: animasiya tərs istiqamətdə icra olunur
İstiqamətlərin növbələşdirilməsi:
<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;
}
Kodun izahı:
.box1: animasiya birbaşa və tərs istiqamətləri növbələşdirir.box2: animasiya tərs istiqamətdən başlayır və daha sonra tərs və birbaşa istiqamətləri növbələşdirir
8.3 Hər iki xassənin istifadəsinə nümunə
Sallanma elementi
- Bu nümunə, sağa və sola hərəkət edən sallanma elementini göstərir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sallanma elementi</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>
Kodun izahı:
@keyframes swing: elementi döndərən animasiyanı təyin edir.box:swinganimasiyası tətbiq olunmuş, 1 saniyəlik davamiyyəti olan, sonsuz təkrarlanma ilə və tərsinə istiqamətlə başlayan element
GO TO FULL VERSION