@starting-style
Misol
@starting-style’dan foydalanish: quti opacity 0 bilan boshlansin va yuqoridan pastga tushsin:
.box {
width: 150px;
height: 150px;
background-color: pink;
opacity: 1;
transition: all 0.9s ease;
@starting-style {
opacity: 0;
translate: 0 -80px;
}
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS @starting-style qoidasi element birinchi uslub yangilanishini olishidan oldin uning boshlang‘ich uslublarini belgilash uchun ishlatiladi.
Bundan popover’lar, modal oynalar yoki display: none holatidan ko‘rinadigan holatga o‘tadigan har qanday elementlar uchun silliq kirish va chiqish o‘tishlarini (transition) yaratishda foydalanish mumkin.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @starting-style | 117 | 117 | 129 | 17.5 | 103 |
CSS sintaksisi
@starting-style {
css declarations;
}
Ko‘proq misollar
Misol
@starting-style’dan pop-over va dialog oynasida foydalanish:
#myPopover {
transition: opacity .5s ease-in, scale .5s ease-in;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
#myDialog {
transition: opacity .5s ease-in, scale .5s ease-in;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!