HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation-play-state Parent Control Example</title>

  <style>

    @keyframes float {

      50% {

        transform: translateY(-12px);

      }

    }



    .gallery {

      display: flex;

      gap: 12px;

      animation-play-state: running;

    }



    .gallery.is-paused {

      animation-play-state: paused;

    }



    .gallery.is-paused * {

      animation-play-state: inherit;

    }



    .dot {

      width: 48px;

      height: 48px;

      border-radius: 8px;

      animation: float 1.2s ease-in-out infinite;

    }



    .dot:nth-child(1) { background: #2563eb; animation-delay: 0s; }

    .dot:nth-child(2) { background: #7c3aed; animation-delay: 0.15s; }

    .dot:nth-child(3) { background: #0d9488; animation-delay: 0.3s; }



    button {

      margin-bottom: 12px;

      padding: 8px 14px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <h1>Pause All Animations</h1>



  <button id="toggleBtn">Pause all</button>



  <div class="gallery" id="gallery">

    <div class="dot"></div>

    <div class="dot"></div>

    <div class="dot"></div>

  </div>



  <script>

    const btn = document.getElementById("toggleBtn");

    const gallery = document.getElementById("gallery");



    btn.addEventListener("click", function () {

      gallery.classList.toggle("is-paused");

      btn.textContent = gallery.classList.contains("is-paused") ? "Resume all" : "Pause all";

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation-play-state Property - Pause All in Container