CSS @starting-style အချက်အလက်

အသုံးပြုပုံနှင့် အပြုအရေး

CSS @starting-style အကျုံး ကို အစိတ်စိတ် ပြုလုပ်မှု ပြုလုပ်ကြည့်ရမည်။

အကျုံး ကို အသုံးပြု၍ အစိတ်စိတ် ပြုလုပ်မှု ပြုလုပ်ကြည့်ရမည်။

ဤ အကျုံး ကို အသုံးပြုကာ ပေါ့ပုံစံ သို့မဟုတ် အခြား display: none အခြေအနေမှ မျှော်လင့်ကြောင်း ဖြစ်သည့် အရာများ အတွက် အလွယ်တကူ ပျံ့နှံ့ သွားရောက် နှင့် လွှတ် ဖြစ်သည့် အရာကို ဖွဲ့စည်းနိုင်သည်。

အမှတ်

အမှတ် 1 @starting-styleအကွက် ကို အရောင်သတ် 0 မှ စတင်ပြီး အောက်သို့ နှင့်ရောက်လာသည့်အပြင်

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

ကိုယ်တိုင် စစ်ဆေးကြည့်

အမှတ် 2

ပေါ့ပုံစံ နှင့် တရားဝင် အသုံးပြု @starting-style:

#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;
  }
}

ကိုယ်တိုင် စစ်ဆေးကြည့်

စက်တင် CSS

@starting-style {
  စက်တင် css;
}

ဘရပ်စ်ဆာ ထောက်ပံ့မှု

ပြင့်စဉ်တွင် အမှတ်များ ကို အသုံးပြုကာ @ အကျုံး ပြုလုပ်မှု ကို လုံလောက်စွာ ထောက်ပံ့သည့် ဘရပ်စ်ဆာ ပုံစံအမှတ် ကို ပြောဆိုသည်。