HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation-timing-function steps Example</title>

  <style>

    @keyframes progress {

      from {

        width: 0%;

      }

      to {

        width: 100%;

      }

    }



    .bar-wrap {

      width: 260px;

      height: 14px;

      background: #e2e8f0;

      border-radius: 999px;

      overflow: hidden;

    }



    .bar {

      height: 100%;

      background: #7c3aed;

      animation: progress 2s steps(4, end) infinite;

    }

  </style>

</head>

<body>

  <h1>Stepped Progress Animation</h1>



  <div class="bar-wrap">

    <div class="bar"></div>

  </div>



  <p>The bar grows in four visible jumps using steps(4, end).</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation-timing-function Property - steps()