Xüsusiyyət transition-timing-function

Xüsusiyyət transition-timing-function hamar keçidin transition dəyişmə sürətini (təcilini) təyin edir. Məsələn, əvvəlcə yavaş, sonra sürətli, sonra yavaş və s.

Sintaksis

cssselektor {
  transition-timing-function: qiymet;
}

Qiymətlər

Qiymət	Təsvir
`ease`	Əvvəlcə yavaş, sonra sürətli, sonda yenə yavaş.
`ease-in`	Yavaş başlayır və tədricən sürətlənir.
`ease-out`	Sürətli başlayır və tədricən dayanır.
`ease-in-out`	Əvvəlcə yavaş, sonra sürətli, sonda yenə yavaş. Ease-dən sürətlə fərqlənir.
`linear`	Həmişə eyni sürət.
`step-start`	Animasiya yoxdur, xüsusiyyət dərhal yekun qiyməti alır.
`step-end`	Animasiya yoxdur, xüsusiyyət gözləyir, `transition-duraton`-da təyin olunmuş vaxtı, və sonra ani olaraq yekun qiyməti alır.
`steps`	Xüsusiyyətin qiyməti sıçrayışlarla dəyişir.
`cubic-bezier`	İxtiyari animasiya təyin edə bilən Bezier əyrisi. Bax: Bezier əyriləri generatoru.

Susmaya görə qiymət: ease.

Müxtəlif qiymətlərin müqayisəsi

Bütün vaxt funksiyalarının işini görmək üçün aşağıdakı blokların üzərinə siçanı gətirin:

Nümunə

Blokun üzərinə siçanı gətirin - o 2 saniyə ərzində eni hamar şəkildə dəyişəcək. Çünki ease-in qiyməti təyin olunub, animasiya yavaş başlayacaq və tədricən sürətlənəcək:

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

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Həmçinin bax

xüsusiyyət transition-duration,
hansı ki, hamar keçidin müddətini təyin edir
xüsusiyyət transition-property,
hansı ki, hamar keçid üçün xüsusiyyət adını təyin edir
xüsusiyyət transition-delay,
hansı ki, hamar keçiddən əvvəl gecikməni təyin edir
xüsusiyyət transition,
hansı ki, hamar keçid üçün qısaltmadır
xüsusiyyət animation,
onun köməyi ilə animasiya etmək olar