CSS3 ilə birlikdə gələn və HTML elementlərinə keçid effektləri əlavə etməyə imkan verən transition funksiyasından istifadə haqqında məlumat var.
CSS3 transition ilə hazırlanmış nümunə aşağıda verilmişdir.
CSS3 transition istifadəsi
Keçid effektini tətbiq etmək üçün transition xüsusiyyətinə iki dəyər verilməlidir.
- Təsiri tətbiq etmək üçün CSS xüsusiyyəti
- Keçid effektinin müddəti
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
transition xassəsindəki width ilə biz effektin yalnız width xassəsinə tətbiq ediləcəyini bildiririk.
Obyektin üzərinə apararkən onun enini dəyişdirək.
div:hover {
width: 300px;
}
Obyektin üzərinə sürükləndikdə, eni transition xüsusiyyətində qeyd etdiyimiz vaxtda (2s) baş verəcək.
Obyektin üzərindən başqa yerə köçürüldükdə obyekt standart ölçüsünə qayıdacaq.
:hover-əheight və color kimi əlavə xüsusiyyətlər əlavə etdikdə xüsusiyyətlərə heç bir keçid effekti tətbiq edilməyəcək.
Çünki onun yalnız width xassəsinə tətbiq ediləcəyini qeyd etdik.
Çoxsaylı keçid effektlərinin tətbiqi
Birdən çox keçid effekti tətbiq etmək istəsək, tətbiq etmək istədiyimiz hər bir effekti transition xassəsinə vergüllə əlavə edə bilərik.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 3s, height 5s;
transition: width 2s, height 5s;
}
: hover funksiyası dəyərləri üzərinə sürü
div:hover {
width: 300px;
height: 300px;
}
Başqa bir üsul isə bütün xüsusiyyətlərini dəyişdirən transition: all xS; dəyəri ilə edilir.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all 5s;
transition: all 5s;
}
Burada qeyd etmək lazımdır ki, bütün xüsusiyyətlərin keçid effekti müəyyən etdiyimiz müddətdə (5 saniyə) tətbiq olunacaq.
Keçidlər üçün vaxt təyin etmək
Biz CSS3 transition-timing-function ilə keçidlər üçün vaxt təyin edə bilərik.
Alacağı dəyərlər
- ease – Yavaş-yavaş başlayan, sonra sürətlə başlayan, sonra sona qədər sönən keçid effektini təyin edir. (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ş giriş-çıxış keçid effektini təyin edir.
- cubic-bezier(n,n,n,n) – Bezier metodu ilə vaxtı təyin etməyə imkan verir.
Keçidlərin planlaşdırılması
Bəzən biz müəyyən bir müddətdən sonra keçid effektinin işləməsini istəyə bilərik.
Bunun üçün transition-delay xüsusiyyətindən istifadə edə bilərik.
İlk nümunəyə transition-delay xüsusiyyətini və 1s dəyərini əlavə etdik.
İndi keçid effekti təyin etdiyimiz vaxtdan sonra başlayacaq.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
Transformasiyalara da keçid effektlərini də tətbiq edə bilərik.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
CSS3 transition xassəsinin həyata keçirilməsi
Hər biri üçün ayrıca xassələri təyin etməklə keçid effektlərindən istifadə edə bilərik.
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Biz onu tək bir xüsusiyyət xətti ilə qısaldılmış şəkildə də istifadə edə bilərik.
div {
transition: width 2s linear 1s;
}
