animationTimingFunction
Misol
<div> elementining animationTimingFunction xususiyatini o‘zgartirish:
document.getElementById("myDIV").style.animationTimingFunction = "linear";O‘zingiz sinab ko‘ring »
Tavsif
animationTimingFunction animatsiyaning tezlik egri chizig‘ini belgilaydi.
Tezlik egri chizig‘i animatsiya bir CSS uslublar to‘plamidan boshqasiga o‘tishi uchun sarflaydigan VAQTni belgilaydi.
Tezlik egri chizig‘i o‘zgarishlarni silliq qilish uchun ishlatiladi.
Sintaksis
animationTimingFunction xususiyatini qaytarish:
object.style.animationTimingFunction
animationTimingFunction xususiyatini o‘rnatish:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| linear | Animatsiya boshidan oxirigacha bir xil tezlikda bo‘ladi |
| ease | Standart qiymat. Animatsiya sekin boshlanadi, keyin tezlashadi va oxirida yana sekinlashadi |
| ease-in | Animatsiya sekin boshlanadi |
| ease-out | Animatsiya sekin tugaydi |
| ease-in-out | Animatsiya sekin boshlanadi va sekin tugaydi |
| cubic-bezier(n, n, n, n) | cubic-bezier funksiyasida o‘z qiymatlaringizni belgilang Mumkin bo‘lgan qiymatlar — 0 dan 1 gacha bo‘lgan sonlar |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Texnik tafsilotlar
| Standart qiymat: | ease |
|---|---|
| Qaytariladigan qiymat: | Elementning animation-timing-function xususiyatini ifodalovchi String |
| CSS versiyasi | CSS3 |
Brauzerlarda qo‘llab-quvvatlash
animationTimingFunction — CSS3 (1999) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 11 |
Tegishli sahifalar
CSS ma’lumotnomasi: animation-timing-function xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!