transition-timing-function xususiyati

transition-timing-function xususiyati transition silliq o‘tishining o‘zgarish tezligini (tezlanishini) belgilaydi. Masalan, avval sekin, keyin tez, keyin yana sekin va h.k.

Sintaksis

cssselector {
  transition-timing-function: qiymat;
}

Qiymatlar

Qiymat	Tavsif
`ease`	Avval sekin, keyin tez, oxirida yana sekin.
`ease-in`	Sekin boshlanadi va asta-sekin tezlashadi.
`ease-out`	Tez boshlanadi va asta-sekin to‘xtaydi.
`ease-in-out`	Avval sekin, keyin tez, oxirida yana sekin. Ease dan tezligi bilan farq qiladi.
`linear`	Har doim bir xil tezlik.
`step-start`	Animatsiya yo‘q, xususiyat darhol yakuniy qiymatni oladi.
`step-end`	Animatsiya yo‘q, xususiyat vaqt kutadi, `transition-duraton` da belgilangan, so‘ngra bir zumda yakuniy qiymatni oladi.
`steps`	Xususiyat qiymati sakrashlar bilan o‘zgaradi.
`cubic-bezier`	Ixtiyoriy animatsiyani belgilashi mumkin bo‘lgan Bezye egri chizig‘i. Qarang: Bezye egri chiziqlari generatori.

Standart qiymat: ease.

Turli qiymatlarni solishtirish

Barcha vaqt funktsiyalar turlarining ishlashini ko‘rish uchun quyidagi bloklarning ustiga sichqonchani olib boring:

Misol

Blok ustiga sichqonchani olib boring - u o‘zining kengligini 2 soniya davomida silliq o‘zgartiradi. ease-in qiymati o‘rnatilganligi sababli, animatsiya sekin boshlanadi va asta-sekin tezlashadi:

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;
}

Результат:

Shuningdek qarang

transition-duration xususiyati,
silliq o‘tishning davomiyligini belgilaydi
transition-property xususiyati,
silliq o‘tish uchun xususiyat nomini belgilaydi
transition-delay xususiyati,
silliq o‘tishdan oldin kechikishni belgilaydi
transition xususiyati,
silliq o‘tish uchun qisqartma hisoblanadi
animation xususiyati,
uning yordamida animatsiya yaratish mumkin