.container {
     left:100px; 
}
       .circleBase {
        border-radius: 300%;
        border: 5px solid #FFFFFF; 
        background: transparent; 
        font-size:30;
        color: blue; 
        transform-style: preserve-3d;
        transition-duration: 4s;
        animation-name: move1;
        animation-duration: 3.5s;
        animation-iteration-count: 2;
        animation-timing-function: linear;
       }
        .circle-0 {
        top: 308px; 
        left: 318px; 
        position: absolute; 
        width: 64px;
        height: 26px;
        border: 5px solid transparent; 
        animation-delay: 20s;
        transition: 500ms linear; 
       }

      .circle0 {
        top: 308px; 
        left: 318px; 
        position: absolute; 
        width: 64px;
        height: 26px;
        border: 5px solid #FFFFFF; 
        animation-delay: 1s;
        transition: 500ms linear; 
       }
       
      .circle1 {
        top: 294px; 
        left: 300px; 
        position: absolute; 
        width: 98px;
        height: 46px;
        border: 5px solid #7572FF;
        animation-delay: 1200ms; 
        transition: 500ms linear; 
       }
      
   	.circle2 {
        top: 276px; 
        left: 280px; 
        position: relative; 
        width: 140px;
        height: 70px;
        border: 5px solid #7335FF;
        animation-delay: 1400ms; 
        transition: 550ms linear; 
       }
      
       .circle3 {
        top: 172px; 
        left:  260px; 
        position: relative; 
        width: 180px;
        height: 100px;
        border: 5px solid #0000FF; 
        animation-delay: 1700ms;
        transition: 350ms linear; 
       }
      
       .circle4 {
        top: 36px; 
        left: 230px; 
        position: relative; 
        width: 240px;
        height: 140px;
        border: 5px solid #00FFFF; 
       animation-delay: 2100ms;
        transition: 350ms linear; 
       }
      
        .circle5 {
        top: -140px; 
        left: 200px; 
        position: relative; 
        width: 300px;
        height: 180px;
        border: 5px solid #00FFAA;
       animation-delay: 2500ms;
        transition: 350ms linear; 
       }       
      
        .circle6 {
        top: -354px; 
        left: 170px; 
        position: relative; 
        width: 360px;
        height: 220px;
        border: 5px solid #00FF00;
        animation-delay: 2900ms;
        transition: 350ms linear; 
       }       
      
        .circle7 {
        top: -622px; 
        left: 140px; 
        position: relative; 
        width: 420px;
        height: 270px;
        border: 5px solid #FFFF00;
        animation-delay: 3300ms;
        transition: 350ms linear; 
       }       
      
        .circle8 {
        top: -930px; 
        left: 100px; 
        position: relative; 
        width: 500px;
        height: 310px;
        border: 5px solid #FFA924;
        animation-delay: 3700ms;
        transition: 350ms linear; 
       }       
      
        .circle9 {
        top: -1290px; 
        left:  60px; 
        position: relative; 
        width: 580px;
        height: 370px;
        border: 5px solid #FE581A;
        animation-delay: 4100ms;
        transition: 350ms linear; 
       }             
       
        .circle10 {
        top: -1700px; 
        left:  32px; 
        position: relative; 
        width: 640px;
        height: 420px;
        border: 5px solid #FF0000;
        animation-delay: 4300ms;
        transition: 350ms linear; 
       }             
      
        .circle11 {
        top: -2160px; 
        left:  20px; 
        position: relative; 
        width: 670px;
        height: 470px;
        border: 5px solid #FF00FF;
        animation-delay: 4500ms;
        transition: 350ms linear; 
       }             
   
 @keyframes move1{
     0% {
     transform: translateY(0px);
      }
      5% {
      transform: translateY(-30px);
      }
      10% {
      transform: translateY(-60px) rotateX(500deg); 
      }
      15% {
      transform: translateY(-90px) rotateX(480deg); 
      }
      20% {
      transform: translateY(-120px) rotateX(450deg); 
      }
      25% {
      transform: translateY(-150px) rotateX(420deg); 
      }
     30% {
      transform: translateY(-180px) rotateX(390deg); 
      }
      35% {
      transform: translateY(-210px) rotateX(360deg); 
      }
     40% {
      transform: translateY(-240px) rotateX(330deg); 
      delay:3s; 
      }
      45% {
      transform: translateY(-270px) rotateX(300deg); 
      }
      50% {
      transform: translateY(-240px) rotateX(270deg); 
      delay:3s; 
      }
      55% {
      transform: translateY(-210px) rotateX(240deg); 
      }
      60% {
      transform: translateY(-180px) rotateX(210deg); 
      delay:3s; 
      }
      65% {
        transform: translateY(-150px) rotateX(180deg);
      }
      70% {
        transform: translateY(-120px) rotateX(150deg);
        delay:18s; 
      }
       75% {
        transform: translateY(-90px) rotateX(120deg); 
      }
       80% {
        transform: translateY(-60px) rotateX(90deg); 
        border-width:5px; 
        background: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 
        72%  75%, #ff4800 95%);
        delay:8s; 
       }
        85% {
        transform: translateY(-30px);
      }
       90% {
        transform: translateY(-20px) rotateX(60deg); 
        background: conic-gradient(from 180deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 
        72%  75%, #ff4800 95%);
        opacity:.3;
        delay:8s; 
      }
       95% {
        transform: translateY(-10px) rotateX(30deg); 
        background: conic-gradient(from 90deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 
        72%  75%, #ff4800 95%);
        opacity:.5;
      }
       100% {
        transform: translateY(0px);
        delay:10s; 
        opacity:.5;
   }
}