animation-fill-mode
Misol
Animatsiya tugaganda <div> elementi oxirgi keyframe’dagi uslub qiymatlarini saqlab qolsin:
div {
animation-fill-mode: forwards;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
animation-fill-mode xususiyati animatsiya ijro etilmayotgan paytda (boshlanishidan oldin, tugaganidan keyin yoki ikkalasida ham) element uchun uslubni belgilaydi.
CSS animatsiyalari birinchi keyframe ijro etilishidan oldin yoki oxirgi keyframe ijro etilganidan keyin elementga ta’sir qilmaydi. animation-fill-mode xususiyati bu xatti-harakatni o‘zgartirishi mumkin.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.animationFillMode="forwards" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 43 | 10 | 16 | 9 | 30 |
CSS sintaksisi
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Standart qiymat. Animatsiya bajarilishidan oldin ham, keyin ham elementga hech qanday uslub qo‘llamaydi |
| forwards | Element oxirgi keyframe o‘rnatgan uslub qiymatlarini saqlab qoladi (animation-direction va animation-iteration-count ga bog‘liq) |
| backwards | Element birinchi keyframe o‘rnatgan uslub qiymatlarini oladi (animation-direction ga bog‘liq) va ularni animation-delay davri davomida saqlab turadi |
| both | Animatsiya forwards va backwards qoidalarining ikkalasiga ham amal qiladi va 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 |
Ko‘proq misollar
Misol
Animatsiya boshlanishidan oldin (animation-delay davrida) <div> elementi birinchi keyframe o‘rnatgan uslub qiymatlarini olsin:
div {
animation-fill-mode: backwards;
}
O‘zingiz sinab ko‘ring »
Misol
Animatsiya boshlanishidan oldin <div> elementi birinchi keyframe o‘rnatgan uslub qiymatlarini olsin va animatsiya tugaganda oxirgi keyframe’dagi uslub qiymatlarini saqlab qolsin:
div {
animation-fill-mode: both;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS animatsiyalar
HTML DOM ma’lumotnomasi: animationFillMode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!