animationFillMode
Misol
<div> elementining animationFillMode xususiyatini o‘zgartirish:
document.getElementById("myDIV").style.animationFillMode = "forwards";O‘zingiz sinab ko‘ring »
Tavsif
animationFillMode xususiyati animatsiya ijro etilmayotganda (u tugaganda yoki "kechikish" (delay) mavjud bo‘lganda) elementga qaysi uslublar qo‘llanishini belgilaydi.
Standart holatda CSS animatsiyalari birinchi keyframe "ijro etilmaguncha" animatsiya qilinayotgan elementga ta’sir qilmaydi va oxirgi keyframe tugagach, unga ta’sir qilishni to‘xtatadi. animationFillMode xususiyati bu xatti-harakatni o‘zgartirishi mumkin.
Sintaksis
animationFillMode xususiyatini qaytarish:
object.style.animationFillMode
animationFillMode xususiyatini o‘rnatish:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Standart qiymat. Animatsiya bajarilishidan oldin ham, keyin ham nishon elementga hech qanday uslub qo‘llamaydi |
| forwards | Animatsiya tugagach (animation-iteration-count bilan aniqlanadi), animatsiya tugagan paytdagi xususiyat qiymatlarini qo‘llaydi |
| backwards | Animatsiya animation-delay bilan belgilangan davr mobaynida animatsiyaning birinchi iteratsiyasini boshlaydigan keyframe’da belgilangan xususiyat qiymatlarini qo‘llaydi. Bular yoki from keyframe qiymatlari (animation-direction "normal" yoki "alternate" bo‘lganda), yoki to keyframe qiymatlari (animationDirection "reverse" yoki "alternate-reverse" bo‘lganda) bo‘ladi |
| both | Animatsiya forwards va backwards qoidalarining ikkalasiga ham amal qiladi. Ya’ni animatsiya xususiyatlarini ikkala yo‘nalishda ham kengaytiradi |
| 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: | none |
|---|---|
| Qaytariladigan qiymat: | Elementning animation-fill-mode xususiyatini ifodalovchi String |
| CSS versiyasi | CSS3 |
Brauzerlarda qo‘llab-quvvatlash
animationFillMode — 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-fill-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!