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-duration xüsusiyyəti,
hamar keçidin müddətini təyin edir
transition-delay xüsusiyyəti,
hamar keçiddən əvvəl gecikməni təyin edir
transition-timing-function xüsusiyyəti,
hamar keçid üçün vaxt funksiyasını təyin edir
transition xüsusiyyəti,
hamar keçid üçün qısaltmadır
animation xüsusiyyəti,
animasiya yaratmaq üçün istifadə olunur