CSS एनिमेशन के साथ छिपे हुए एलिमेंट्स को प्रकट करना

परिचय

CSS एनिमेशन हमें छिपे हुए एलिमेंट्स को प्रदर्शित करने की अनुमति देते हैं। होवर, फोकस, या अन्य इंटरैक्शन के साथ संयोजित करके, हम आकर्षक रिवील प्रभाव बना सकते हैं।

उदाहरण: होवर पर एलिमेंट्स प्रकट करना

<!DOCTYPE html>
<html>
<style>
  .item {
    position: relative;
    perspective: 1000px;
  }
  .demo, .hidden-one {
    background: lightgreen;
    box-shadow: 0 5px 12px rgba(0,0,0,0.6);
  }
  .item:hover .hidden-one {
    animation: yoyo 1.4s backwards ease;
  }
  .item:hover .demo {
    animation-name: yo 1s ease;
  }
  .demo {
    position: absolute;
    height: 150px;
    width: 150px;
    background-color: firebrick;
    border-radius: 50%;
    left: 100px;
    top: 50px;
    z-index: 2;
  }
  .hidden-one {
    background-color: #880;
    border-radius: 3px;
    height: 120px;
    width: 55px;
    position: absolute;
    left: 280px;
    top: 140px;
    opacity: 0;
    transition: opacity 0.8s;
  }
  @keyframes yoyo {
    0% { top: 140px; opacity: 0; left: 70px; z-index: 1; }
    50% { left: 12px; opacity: 1; z-index: 2; top: 140px; }
    100% { opacity: 1; left: 150px; z-index: 3; }
  }
  @keyframes yo {
    0% { }
    30% { transform: rotate3D(-1,1,0.1,10deg) scale(1.05); }
    50% { transform: rotate3D(1,-1,0.1,10deg) scale(1.05); }
    100% { }
  }
</style>
<body>
  <div class="item">
    <div class="hidden-one"></div>
    <div class="demo"></div>
  </div>
</body>
</html>

मुख्य तकनीकें

• opacity: 0 → opacity: 1 फेड-इन के लिए
• transform (translate, scale, rotate) एंट्रेंस मोशन के लिए
• z-index बदलाव लेयरिंग के लिए
• animation-fill-mode: backwards एनिमेशन से पहले स्टाइल्स लागू करता है
• perspective + rotate3D 3D प्रभाव के लिए

व्यावहारिक पैटर्न्स

1. फेड-इन अप (सबसे आम)

<!DOCTYPE html>
<html>
<head>
  <style>
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Intersection Observer के साथ उपयोग के लिए */
  </style>
</head>
<body>
  <div class="reveal-on-scroll">कंटेंट 1</div>
  <div class="reveal-on-scroll">कंटेंट 2</div>
  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(e => e.target.classList.toggle('visible', e.isIntersecting));
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal-on-scroll').forEach(el => observer.observe(el));
  </script>
</body>
</html>

2. स्टैगर चिल्ड्रन रिवील

<!DOCTYPE html>
<html>
<head>
  <style>
    .stagger-container { display: flex; gap: 1rem; flex-wrap: wrap; }
    .stagger-item {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
      animation: stagger-in 0.5s ease forwards;
    }
    @keyframes stagger-in {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .stagger-item:nth-child(1) { animation-delay: 0ms; }
    .stagger-item:nth-child(2) { animation-delay: 100ms; }
    .stagger-item:nth-child(3) { animation-delay: 200ms; }
    .stagger-item:nth-child(4) { animation-delay: 300ms; }
    .stagger-item:nth-child(5) { animation-delay: 400ms; }
    .stagger-item:nth-child(6) { animation-delay: 500ms; }
  </style>
</head>
<body>
  <div class="stagger-container">
    <div class="stagger-item" style="width:150px;height:150px;background:#3b82f6"></div>
    <div class="stagger-item" style="width:150px;height:150px;background:#8b5cf6"></div>
    <div class="stagger-item" style="width:150px;height:150px;background:#ec4899"></div>
    <div class="stagger-item" style="width:150px;height:150px;background:#f59e0b"></div>
    <div class="stagger-item" style="width:150px;height:150px;background:#10b981"></div>
    <div class="stagger-item" style="width:150px;height:150px;background:#ef4444"></div>
  </div>
</body>
</html>

3. कार्ड होवर रिवील

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 300px;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
    .card-image { height: 200px; background: linear-gradient(135deg, #667eea, #764ba2); position: relative; overflow: hidden; }
    .card-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.7);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: translateY(20px);
      transition: opacity 0.3s, transform 0.3s;
    }
    .card:hover .card-overlay { opacity: 1; transform: translateY(0); }
    .card-content { padding: 1.5rem; }
  </style>
</head>
<body>
  <div class="card">
    <div class="card-image">
      <div class="card-overlay"><span style="color:white; font-size:1.5rem;">विवरण देखें</span></div>
    </div>
    <div class="card-content">
      <h3>कार्ड शीर्षक</h3>
      <p>होवर पर अतिरिक्त जानकारी प्रकट होती है।</p>
    </div>
  </div>
</body>
</html>

एक्सेसिबिलिटी

• prefers-reduced-motion का सम्मान करें
• सुनिश्चित करें कि कंटेंट एनिमेशन के बिना भी सुलभ है
• डायनामिक कंटेंट के लिए aria-live क्षेत्रों का उपयोग करें