@keyframes
Misol
Element 0px dan 200px gacha asta-sekin pastga harakatlansin:
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS @keyframes qoidasi animatsiya ketma-ketligidagi nuqtalar uchun CSS uslublarini belgilash orqali animatsiya bosqichlarini boshqarish uchun ishlatiladi.
Animatsiya bir CSS uslublar to‘plamidan boshqasiga asta-sekin o‘tish orqali yaratiladi. Animatsiya davomida CSS uslublar to‘plamini ko‘p marta o‘zgartirishingiz mumkin.
Uslub o‘zgarishi qachon sodir bo‘lishini foizda yoki 0% va 100% bilan bir xil bo‘lgan "from" va "to" kalit so‘zlari bilan belgilang. 0% — animatsiyaning boshlanishi, 100% — animatsiya tugagan payt.
Maslahat: Brauzerlarda eng yaxshi qo‘llab-quvvatlanishi uchun har doim 0% va 100% selektorlarining ikkalasini ham belgilang.
Eslatma: Animatsiyaning ko‘rinishini boshqarish, shuningdek, animatsiyani selektorlarga bog‘lash uchun animation xususiyatlaridan foydalaning.
Eslatma: Keyframe ichida !important bilan yozilgan CSS e’lonlari e’tiborga olinmaydi (ushbu sahifadagi oxirgi misolga qarang).
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @keyframes | 43 | 10 | 16 | 9 | 30 |
CSS sintaksisi
@keyframes name {
keyframes-selector {css-styles;}
keyframes-selector {css-styles;}
...
}
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| name | Majburiy. Keyframe uchun nom belgilaydi |
| keyframes-selector | Majburiy. Animatsiya ketma-ketligidagi nuqtalar. Ruxsat etilgan qiymatlar: 0-100% Eslatma: Bitta animatsiya ketma-ketligida ko‘plab keyframes-selectors bo‘lishi mumkin |
| css-styles | Majburiy. Bir yoki bir nechta CSS xususiyati va qiymati |
Ko‘proq misollar
Misol
Bitta @keyframe ichida bir nechta keyframe selektorlari:
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
O‘zingiz sinab ko‘ring »
Misol
Bir nechta CSS xususiyatini o‘zgartiring:
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
O‘zingiz sinab ko‘ring »
Misol
Bir nechta CSS xususiyatiga ega bir nechta keyframe selektorlari:
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
O‘zingiz sinab ko‘ring »
Misol
Eslatma: Keyframe ichida !important bilan yozilgan CSS e’lonlari e’tiborga olinmaydi:
@keyframes mymove {
from {top: 0px;}
50% {background: blue !important;} /* ignored */
to {top: 200px;}
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS animatsiyalar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!