HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation Multiple Example</title>

  <style>

    @keyframes fadeIn {

      from { opacity: 0; }

      to { opacity: 1; }

    }



    @keyframes pulse {

      50% { transform: scale(1.1); }

    }



    .badge {

      display: inline-block;

      padding: 10px 18px;

      background: #7c3aed;

      color: white;

      border-radius: 999px;

      animation:

        fadeIn 0.5s ease-out forwards,

        pulse 1.2s ease-in-out 0.5s infinite;

    }

  </style>

</head>

<body>

  <h1>Multiple Animations</h1>



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



  <p>The badge fades in once, then pulses continuously.</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation Property - Multiple Animations