CSS3 ilə gələn və animasiyalar yaratmaq üçün istifadə edilən animasiya və @keyframes funksiyalarının istifadəsi haqqında məlumatlar var.
CSS3 animasiyasını necə etmək olar
Animasiya müəyyən vaxt ərzində elementin bir üslubdan digərinə dəyişməsinə səbəb olur.
İstədiyiniz kimi CSS xüsusiyyətlərini dəyişdirə və animasiya xüsusiyyətləri əlavə edə bilərik.
Canlandırmaq üçün əvvəlcə @keyframes ilə animasiya addımlarını yaratmalıyıq.
CSS3 @keyframes müəyyən vaxtlarda elementə hansı üslubların tətbiq olunacağını müəyyənləşdirir.
@keyframes ilə animasiya çərçivələrinin yaradılması
CSS3 @keyframes ilə yaradacağımız animasiyanın çərçivə qaydalarını təyin etməyə imkan verir.
Növbəti addımda yaratdığımız animasiya çərçivəsini HTML elementinə qoşmaq kifayət edəcək.
Aşağıdakı misalda Codestack animasiyası 4 saniyə davam edəcək və göstərilən vaxt ərzində <div> elementinin fon rəngini qırmızıdan sarıya dəyişəcək.
@keyframes Codestack {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: Codestack;
animation-duration: 4s;
}
Yuxarıdakı nümunədə üslubun nə vaxt dəyişəcəyini göstərmək üçün from və to açar sözlərindən istifadə etdik.
Faizdən istifadə edərək əsas çərçivələri tətbiq edə bilərik.
Faizdən istifadə edərək istədiyiniz qədər üslub dəyişikliyi addımı əlavə edə bilərsiniz.
Yuxarıdakı misalda from əvəzinə 0% və to əvəzinə 100% istifadə edə bilərik.
Aşağıdakı nümunə animasiya vaxtının 25%-i, 50%-i və animasiyanın 100%-i tamamlandıqda <div> elementinin fon rəngini dəyişəcək.
@keyframes Codestack {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: Codestack;
animation-duration: 4s;
}
Aşağıdakı nümunə elementin fon rəngini və mövqeyini dəyişəcək.
@keyframes Codestack {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: Codestack;
animation-duration: 4s;
}
Animasiya vaxtının təyin edilməsi
Yaratdığımız animasiyanı gecikmə ilə müəyyən edilmiş vaxtdan sonra başlamasını animation-delay təyin edə bilərik.
Aşağıdakı nümunədə animasiya 2 saniyədən sonra başlayacaq.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Animasiya təkrarlarının sayının müəyyən edilməsi
Yaratdığımız animasiyanı animation-iteration-count ilə istədiyimiz qədər təkrar edə bilərik.
Aşağıdakı nümunə animasiyanı 3 dəfə işlədəcək.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Animasiyanın davamlı təkrarlanması üçün infinite dəyərindən istifadə edə bilərik.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Animasiya istiqamətini müəyyənləşdirmək
Əgər animasiya üçün heç bir istiqamət göstərməsək, animasiya əvvəldən axıra doğru hərəkət edəcək.
Animasiya istiqamətini təyin etmək üçün animation-direction xüsusiyyətindən istifadə edə bilərik.
Aşağıdakı nümunə əsas çərçivələri əks istiqamətdə işlədəcək.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
Biz alternate dəyərindən istifadə edərək animasiyanı əvvəlcə irəli, sonra geri, sonra irəli sürüşdürə bilərik.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
Animasiya üçün vaxtın təyin olunması
CSS3 animation-timing-function xüsusiyyəti ilə animasiya üçün vaxt təyin edə bilərik.
Qəbul edəcəyi dəyərlər
- ease – Yavaş başlanğıcı, ardınca sürətli, sonra tədricən bitən keçid effektini göstərir. (Defolt)
- linear – Eyni sürətlə başlayan və bitən keçid effektini təyin edir.
- ease-in – Yavaş başlanğıc keçid effektini təyin edir.
- ease-out – Yavaş bitən keçid effektini təyin edir.
- ease-in-out – Yavaş başlanğıc-son keçid effektini təyin edir.
- cubic-bezier(n,n,n,n) – Bezier metodu ilə vaxtı təyin etməyə imkan verir.
Animasiya xassələrinin müəyyən edilməsi
Aşağıdakı nümunədə olduğu kimi animasiya xassəsini ayrıca yaza bilərik.
div {
animation-name: Codestack;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Yaxud animation xassələrini animasiya xassələri ilə bir sətirdə təyin edə bilərik.
div {
animation: Codestack 5s linear 2s infinite alternate;
}
Sizə xoş günlər arzulayıram.
