<div class="container">
  <div class="gradient_01"></div>
  <div class="gradient_02"></div>
  <div class="gradient_03"></div>
  <div class="gradient_04"></div>
</div>

.container {
  width:100%;
  display:flex;
}

@keyframes animazione {
  0% {
    background-size: 100%;
  }
  100% {
    background-size:400%;
  }
}

.gradient_01, .gradient_02, .gradient_03, .gradient_04 {
  width:25%;
  height:0;
  padding-top:25%;
  border-radius:100%;
  animation: animazione 6s ease-in-out infinite alternate;
}
.gradient_01 {
  background:repeating-radial-gradient(
      circle at top left,
      #ffff00,
      #ffa500,
      #ff0000,
      #4b0082,
      #000000 50%,
      #ffff00 55%
    );
}

.gradient_02 {
  background:repeating-radial-gradient(
      circle,
      #ff0000,
      #ff3300 30px
    );
}

.gradient_03 {
  background: repeating-radial-gradient(
      circle at bottom center,
      black 49%,
      grey 50%
    );
}

.gradient_04 {
  background: repeating-radial-gradient(
    circle at 100%, 
    #333, 
    #333 10px, 
    #eee 10px, 
    #eee 20px);
}