CSS @starting-style రూల్

నిర్వచనం మరియు ఉపయోగం

సిఎస్ఎస్ @starting-style విధానం అందుకు స్టైల్ అప్డేట్ అవుతున్న ముందు ఎలిమెంట్ యొక్క ప్రారంభ స్టైల్ నిర్వచించడానికి ఉపయోగించబడుతుంది.

ఈ పద్ధతి పోపప్ లేదా మోడల్ ఫ్రేమ్ లేదా మరొక డిస్ప్లే: నాన్ నుండి కనిపించే స్థితిగతి బదిలీకి కనిపించే మరియు అదనపు ట్రాన్సిషన్ ప్రభావాలను సృష్టించడానికి ఉపయోగించవచ్చు.

ఇన్స్టాన్స్

ఉదాహరణ 1

ఉపయోగించండి @starting-styleబాక్స్ ప్రక్రియను అపకాలితి 0 నుండి ప్రారంభించండి, మరియు పైకి దిగిరించండి:

.box {
  వెడల్పు: 150పిక్సెల్స్;
  అడుగునిరుద్దీకరణ: 150పిక్సెల్స్;
  బ్యాక్గ్రౌండ్ కలర్: పింక్;
  ఆపకాలితి: 1;
  ట్రాన్సిషన్: అన్ని 0.9స్ ఈజ్;
  @starting-style {
    ఆపకాలితి: 0;
    ట్రాన్స్లేట్: 0 -80పిక్సెల్స్;
  }
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

పోపప్ మరియు డైలాగ్ లో ఉపయోగించండి @starting-style:

#myPopover {
  ట్రాన్సిషన్: ఆపకాలితి 0.5స్ ఈజ్ ఇన్, స్కేల్ 0.5స్ ఈజ్ ఇన్;
  @starting-style {
    ఆపకాలితి: 0;
    స్కేల్: 1.1;
  }
}
#myDialog {
  ట్రాన్సిషన్: ఆపకాలితి 0.5స్ ఈజ్ ఇన్, స్కేల్ 0.5స్ ఈజ్ ఇన్;
  @starting-style {
    ఆపకాలితి: 0;
    స్కేల్: 1.1;
  }
}

స్వయంగా ప్రయత్నించండి

సిఎస్ఎస్ సంకలనం

@starting-style {
  సిఎస్ఎస్ డెక్లరేషన్;
}

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ @ విధానాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్ధారిస్తుంది.