Xüsusiyyət transition-property
transition-property xüsusiyyəti,
transition hamar keçidi ilə animasiya
olunacaq xüsusiyyəti təyin edir. Dəyər olaraq
animasiya olunacaq CSS xüsusiyyətinin adı
ötürülməlidir. Əgər dəyər all olaraq
təyin olunarsa (standart olaraq bu dəyərdir) -
bütün xüsusiyyətlər eyni anda animasiya olunacaq.
Sintaksis
selektor {
transition-property: dəyər;
}
Nümunə
Blokun üzərinə siçanı gətirin - o enini hamar şəkildə
dəyişəcək, çünki transition-property
width dəyərinə malikdir:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Nümunə . All dəyəri
Bu nümunədə transition-property
all dəyərinə malikdir - buna görə də
hover vəziyyəti üçün yazılmış bütün
xüsusiyyətlər (bizim vəziyyətimizdə bu
width və height) hamar şəkildə
dəyişəcək. Bütün dəyişikliklər transition-duration
-də təyin olunmuş eyni müddət ərzində baş verəcək:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: all;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
:
Həmçinin bax
-
transition-durationxüsusiyyəti,
hamar keçidin müddətini təyin edir -
transition-delayxüsusiyyəti,
hamar keçiddən əvvəl gecikməni təyin edir -
transition-timing-functionxüsusiyyəti,
hamar keçid üçün vaxt funksiyasını təyin edir -
transitionxüsusiyyəti,
hamar keçid üçün qısaltmadır -
animationxüsusiyyəti,
animasiya yaratmaq üçün istifadə olunur