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

cssselektor {
  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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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