How to Create Pulsing Circle using html and CSS

<style>
              #container {
                width: 100%;
                height: 400px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                position: relative;
              }

              .circle {
                border-radius: 50%;
                background:#F60;
                width: 150px;
                height: 150px;
                position: absolute;
                opacity: 0;
                animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
              }

              .myitem {
                z-index: 100;
                padding: 5px;
              }

              .myitem img {
                width: 150px;
                transform: translateY(1px);
              }

              @keyframes scaleIn {
                from {
                  transform: scale(.5, .5);
                  opacity: .5;
                }
                to {
                  transform: scale(2.5, 2.5);
                  opacity: 0;
                }
              }
          </style>


<div id="myContainer">
    <div id="container">
     <div class="myitem">
       <img src="schauhan_logo.png">
     </div>
     <div class="circle" style="animation-delay: -3s"></div>
     <div class="circle" style="animation-delay: -2s"></div>
     <div class="circle" style="animation-delay: -1s"></div>
     <div class="circle" style="animation-delay: 0s"></div>
   </div>
  </div>