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
selector {
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:
<div id="elem"></div>
#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-durationxususiyati,
silliq o‘tishning davomiyligini belgilaydi -
transition-propertyxususiyati,
silliq o‘tish uchun xususiyat nomini belgilaydi -
transition-delayxususiyati,
silliq o‘tishdan oldin kechikishni belgilaydi -
transitionxususiyati,
silliq o‘tish uchun qisqartma hisoblanadi -
animationxususiyati,
uning yordamida animatsiya yaratish mumkin