Rainbow circles drawing in

index.html

<!-- http://explore.speedousa.com/experience/fueledbywater/#/video/fueled-by-water/ -->

<div class="circlewrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

rainbow-circles-drawing-in.markdown

Rainbow circles drawing in

A Pen by Kristian Bjørnard on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"></script>

style.css

* {
  box-sizing: border-box;
}

body {
  background: #4e4e4e;
  color: #f7f8f8;
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

.circle,
.circle::before,
.circle::after {
  background: transparent;
  border-radius: 100%;
  display: block;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 300px;
  height: 300px;
  top:50vh;
  margin-top: -150px;
  left: 50%;
  margin-left: -150px;
  z-index: 0;
}

.circlewrap {
  position: fixed;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.circle::before,
.circle::after {
  content: ' ';
  height: 294px;
  width: 294px;
}

.circle,
.circle::before,
.circle::after {
  border: 3px solid #f7f8f8;
  text-indent: -300%;
  overflow: hidden;
  text-wrap: nowrap;
  z-index: 0;
}

.circle:nth-child(1) {
  -webkit-animation: scaleup5 12s 0s linear infinite;
  -moz-animation: scaleup5 12s 0s linear infinite;
  animation: scaleup5 12s 0s linear infinite;
}
.circle:nth-child(1)::before {
  -webkit-animation: scaleup5 12s -.5s linear infinite;
  -moz-animation: scaleup5 12s -.5s linear infinite;
  animation: scaleup5 12s -.5s linear infinite;
}
.circle:nth-child(1)::after  {
  -webkit-animation: scaleup5 12s -1s linear infinite;
  -moz-animation: scaleup5 12s -1s linear infinite;
  animation: scaleup5 12s -1s linear infinite;
}
.circle:nth-child(2) {
  -webkit-animation: scaleup5 12s -1.5s linear infinite;
  -moz-animation: scaleup5 12s -1.5s linear infinite;
  animation: scaleup5 12s -1.5s linear infinite;
}
.circle:nth-child(2)::before {
  -webkit-animation: scaleup5 12s -2s linear infinite;
  -moz-animation: scaleup5 12s -2s linear infinite;
  animation: scaleup5 12s -2s linear infinite;
}
.circle:nth-child(2)::after  {
  -webkit-animation: scaleup5 12s -2.5s linear infinite;
  -moz-animation: scaleup5 12s -2.5s linear infinite;
  animation: scaleup5 12s -2.5s linear infinite;
}
.circle:nth-child(3)  {
  -webkit-animation: scaleup5 12s -3s linear infinite;
  -moz-animation: scaleup5 12s -3s linear infinite;
  animation: scaleup5 12s -3s linear infinite;
}
.circle:nth-child(3)::before  {
  -webkit-animation: scaleup5 12s -3.5s linear infinite;
  -moz-animation: scaleup5 12s -3.5s linear infinite;
  animation: scaleup5 12s -3.5s linear infinite;
}
.circle:nth-child(3)::after  {
  -webkit-animation: scaleup5 12s -4s linear infinite;
  -moz-animation: scaleup5 12s -4s linear infinite;
  animation: scaleup5 12s -4s linear infinite;
}
.circle:nth-child(4)  {
  -webkit-animation: scaleup5 12s -4.5s linear infinite;
  -moz-animation: scaleup5 12s -4.5s linear infinite;
  animation: scaleup5 12s -4.5s linear infinite;
}
.circle:nth-child(4)::before  {
  -webkit-animation: scaleup5 12s -5s linear infinite;
  -moz-animation: scaleup5 12s -5s linear infinite;
  animation: scaleup5 12s -5s linear infinite;
}
.circle:nth-child(4)::after  {
  -webkit-animation: scaleup5 12s -5.5s linear infinite;
  -moz-animation: scaleup5 12s -5.5s linear infinite;
  animation: scaleup5 12s -5.5s linear infinite;
}
.circle:nth-child(5) {
  -webkit-animation: scaleup5 12s -6s linear infinite;
  -moz-animation: scaleup5 12s -6s linear infinite;
  animation: scaleup5 12s -6s linear infinite;
}
.circle:nth-child(5)::before {
  -webkit-animation: scaleup5 12s -6.5s linear infinite;
  -moz-animation: scaleup5 12s -6.5s linear infinite;
  animation: scaleup5 12s -6.5s linear infinite;
}
.circle:nth-child(5)::after  {
  -webkit-animation: scaleup5 12s -7s linear infinite;
  -moz-animation: scaleup5 12s -7s linear infinite;
  animation: scaleup5 12s -7s linear infinite;
}
.circle:nth-child(6) {
  -webkit-animation: scaleup5 12s -7.5s linear infinite;
  -moz-animation: scaleup5 12s -7.5s linear infinite;
  animation: scaleup5 12s -7.5s linear infinite;
}
.circle:nth-child(6)::before {
  -webkit-animation: scaleup5 12s -8s linear infinite;
  -moz-animation: scaleup5 12s -8s linear infinite;
  animation: scaleup5 12s -8s linear infinite;
}
.circle:nth-child(6)::after  {
  -webkit-animation: scaleup5 12s -8.5s linear infinite;
  -moz-animation: scaleup5 12s -8.5s linear infinite;
  animation: scaleup5 12s -8.5s linear infinite;
}
.circle:nth-child(7)  {
  -webkit-animation: scaleup5 12s -9s linear infinite;
  -moz-animation: scaleup5 12s -9s linear infinite;
  animation: scaleup5 12s -9s linear infinite;
}
.circle:nth-child(7)::before  {
  -webkit-animation: scaleup5 12s -9.5s linear infinite;
  -moz-animation: scaleup5 12s -9.5s linear infinite;
  animation: scaleup5 12s -9.5s linear infinite;
}
.circle:nth-child(7)::after  {
  -webkit-animation: scaleup5 12s -10s linear infinite;
  -moz-animation: scaleup5 12s -10s linear infinite;
  animation: scaleup5 12s -10s linear infinite;
}
.circle:nth-child(8)  {
  -webkit-animation: scaleup5 12s -10.5s linear infinite;
  -moz-animation: scaleup5 12s -10.5s linear infinite;
  animation: scaleup5 12s -10.5s linear infinite;
}
.circle:nth-child(8)::before  {
  -webkit-animation: scaleup5 12s -11s linear infinite;
  -moz-animation: scaleup5 12s -11s linear infinite;
  animation: scaleup5 12s -11s linear infinite;
}
.circle:nth-child(8)::after  {
  -webkit-animation: scaleup5 12s -11.5s linear infinite;
  -moz-animation: scaleup5 12s -11.5s linear infinite;
  animation: scaleup5 12s -11.5s linear infinite;
}

@-moz-keyframes scaleup5 {
  0% {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    border-radius: 100%;
    border-color: #f7f8f8;
  }
   7% { border-color: rgba(153,164,174,1); }
  20% { border-color: rgba(110,203,152,1); }
  40% { border-color: rgba(237,170,0,1); }
  60% { border-color: rgba(154,56,32,1); }
  100% {
    margin-top: -1300px;
    margin-left: -1300px;
    width: 2600px;
    height: 2600px;
    border-radius: 0%;
    border-color: #4e4e4e;
  }
}

@-webkit-keyframes scaleup5 {
  0% {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    border-radius: 100%;
    border-color: #f7f8f8;
  }
   7% { border-color: rgba(153,164,174,1); }
  20% { border-color: rgba(110,203,152,1); }
  40% { border-color: rgba(237,170,0,1); }
  60% { border-color: rgba(154,56,32,1); }
  100% {
    margin-top: -1300px;
    margin-left: -1300px;
    width: 2600px;
    height: 2600px;
    border-radius: 0%;
    border-color: #4e4e4e;
  }
}

@keyframes scaleup5 {
  0% {
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    border-radius: 100%;
    border-color: #f7f8f8;
  }
   7% { border-color: rgba(153,164,174,1); }
  20% { border-color: rgba(110,203,152,1); }
  40% { border-color: rgba(237,170,0,1); }
  60% { border-color: rgba(154,56,32,1); }
  100% {
    margin-top: -1300px;
    margin-left: -1300px;
    width: 2600px;
    height: 2600px;
    border-radius: 0%;
    border-color: #4e4e4e;
  }
}