CSS @starting-style नियम

परिभाषा और इस्तेमाल

CSS @starting-style इस नियम का उपयोग एलिमेंट को उसके पहले शैली अद्यतन प्राप्त होने से पहले एलिमेंट के प्रारंभिक शैली को परिभाषित करने के लिए किया जाता है।

यह बगले बारे, मॉडल बारे या डिस्प्ले: none स्थिति से दिखाई देने वाले किसी भी एलिमेंट के लिए शांतीपूर्ण प्रवेश और निष्क्रिय करने के लिए इस्तेमाल किया जा सकता है।

उदाहरण

उदाहरण 1

इस्तेमाल करें @starting-styleबॉक्स को ऑपेक्सी 0 से शुरू करें और शीर्ष से नीचे गिराएं:

.box {
  चौड़ाई: 150px;
  ऊंचाई: 150px;
  बैकग्राउण्ड-कलर: गुलाबी;
  ऑपेक्सी: 1;
  ट्रांसिशन: सब का 0.9s इज़ी;
  @starting-style {
    ऑपेक्सी: 0;
    तारा: 0 -80px;
  }
}

खुद एक प्रयोग करें

उदाहरण 2

बगले बारे और डायलॉग में इस्तेमाल करें @starting-style：

#myPopover {
  ट्रांसिशन: ऑपेक्सी 0.5s इज़ी-इन, स्केल 0.5s इज़ी-इन;
  @starting-style {
    ऑपेक्सी: 0;
    स्केल: 1.1;
  }
}
#myDialog {
  ट्रांसिशन: ऑपेक्सी 0.5s इज़ी-इन, स्केल 0.5s इज़ी-इन;
  @starting-style {
    ऑपेक्सी: 0;
    स्केल: 1.1;
  }
}

खुद एक प्रयोग करें

CSS व्याकरण

@starting-style {
  css व्यक्तव्य;
}

ब्राउज़र समर्थन

टेबल में दिए गए नंबर इस @ नियम के प्रथम पूर्णता समर्थन करने वाले ब्राउज़र के संस्करण को प्रदर्शित करते हैं।