Animated CSS Animation Expanding Square box with CSS Gradient

Repeat a CSS Animation with just CSS.

    body {
        background-color: bisque;
    }
  
    .box {
      width: 100px;
      height: 100px;
      border-radius:30px;
      background-color: #4158D0;
      background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
      animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
      margin-bottom:20px;
    }

    @keyframes anime {
      0% {
      width: 100px;
      height: 100px;
      }
      25% {
      width: 150px;
      height: 150px;
      }
      50% {
      width: 300px;
      height: 300px;
      }
      100% {
      width: 600px;
      height: 600px;
      }

    }

a {
  padding-top:40px;
  font-family: sans-serif;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
  color:#4158D0;
}


 

See the Pen Untitled by Devtutorials4u (@devtutorial4u) on CodePen.