CSS z-index प्रॉपर्टी को एनिमेट करें

CSS में z-index प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह स्थित तत्वों के स्टैकिंग क्रम को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        position: absolute; 
      } 
      #box div { 
        background-color: orange; 
        border: 2px solid yellow; 
        width: 100px; 
        height: 100px; 
        opacity: 0.3; 
      } 
      div#demo { 
        opacity: 1; 
        background-color: coral; 
        z-index: 1; 
        animation: myanim 3s; 
      } 
      @keyframes myanim { 
        30% { 
          z-index: 3; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS z-index प्रॉपर्टी</h1> 
    <div id="box"> 
      <div id="demo"></div> 
      <div style="top:20px;left:20px;z-index:1;">एक</div> 
      <div style="top:40px;left:40px;z-index:2;">दो</div> 
      <div style="top:60px;left:60px;z-index:3;">तीन</div> 
      <div style="top:80px;left:80px;z-index:4;">चार</div> 
      <div style="top:100px;left:40px;z-index:5;">पांच</div> 
      <div style="top:120px;left:60px;z-index:6;">छह</div> 
      <div style="top:140px;left:80px;z-index:7;">सात</div> 
    </div> 
  </body> 
</html>

व्याख्या: #demo