Infographic - Animation-2

Infographic(Round - 6) - Animation

by Roshan Karunarathna

HTML

<div class="container">
  <div class="round-container">
    <div class="round-section">
      <div>
        <div></div>
      </div>
      <div>
        <div></div>
      </div>
      <div>
        <div></div>
      </div>
      <div>
        <div></div>
      </div>
      <div>
        <div></div>
      </div>
      <div>
        <div></div>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  padding: 180px;
  clear: left;
  display: flex;
  justify-content: space-around;
}

.round-section {
  width: 300px;
  height: 300px;
  border: 0px solid #000;
  border-radius: 50%;
  /*! box-shadow: 0 0 20px -5px #000; */
  position: relative;
}

.round-section div {
  border-radius: 50%;
  box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 0;
}

.round-section>div:nth-child(1) {
  width: 260px;
  height: 260px;
  left: 20px;
  top: 20px;
  z-index: 0;
  background-color: #6fddb0;
  -webkit-animation: 4s roundSection1 2s infinite linear;
  animation: 4s roundSection1 2s infinite linear;
}

.round-section>div:nth-child(2) {
  width: 220px;
  height: 220px;
  left: 40px;
  top: 40px;
  background-color: #67b4c6;
  -webkit-animation: 4s roundSection2 2s infinite linear;
  animation: 4s roundSection2 2s infinite linear;
}

.round-section>div:nth-child(3) {
  width: 180px;
  height: 180px;
  left: 60px;
  top: 60px;
  background-color: #bf77c3;
  -webkit-animation: 4s roundSection3 2s infinite linear;
  animation: 4s roundSection3 2s infinite linear;
}

.round-section>div:nth-child(4) {
  width: 140px;
  height: 140px;
  left: 80px;
  top: 80px;
  background-color: #df7484;
  -webkit-animation: 4s roundSection4 2s infinite linear;
  animation: 4s roundSection4 2s infinite linear;
}

.round-section>div:nth-child(5) {
  width: 100px;
  height: 100px;
  left: 100px;
  top: 100px;
  background-color: #faa971;
  -webkit-animation: 4s roundSection5 2s infinite linear;
  animation: 4s roundSection5 2s infinite linear;
}

.round-section>div:nth-child(6) {
  width: 60px;
  height: 60px;
  left: 120px;
  top: 120px;
  background-color: #f8ca7c;
  -webkit-animation: 4s roundSection6 2s infinite linear;
  animation: 4s roundSection6 2s infinite linear;
}

.round-section>div>div {
  width: 100px;
  height: 100px;
}

.round-section>div:nth-child(1)>div {
  left: -50px;
  bottom: -145px;
  background-color: #6fddb0;
  -webkit-animation: 4s...