HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation-play-state Multiple Example</title>

  <style>

    @keyframes fadeIn {

      from { opacity: 0; }

      to { opacity: 1; }

    }



    @keyframes pulse {

      50% { transform: scale(1.12); }

    }



    .badge {

      display: inline-block;

      padding: 10px 18px;

      background: #7c3aed;

      color: white;

      border-radius: 999px;

      animation-name: fadeIn, pulse;

      animation-duration: 0.6s, 1.5s;

      animation-iteration-count: 1, infinite;

      animation-play-state: running, paused;

    }

  </style>

</head>

<body>

  <h1>Multiple Animation Play States</h1>



  <span class="badge">Live</span>



  <p>The fade-in runs once. The pulse animation stays paused.</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation-play-state Property - Multiple Animations