css animation

by Pranab Dey

HTML

<div class="animation_demo">
    <div class="wrapper">
      <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></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</div>

SCSS

body {
  overflow: hidden;
  background: rgb(20, 20, 20);
}
.animation_demo {
    overflow: hidden;
    padding-top: 50px;
}
.animation_demo .wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 78%;
    overflow: hidden;
}
.animation_demo .wrapper div {
    margin-top: -17%;
    height: 34%;
    width: 2%;
    top: 30%;
    border-radius: 20px;
    position: absolute;
}
.animation_demo .wrapper div:nth-of-type(1) {
    animation: prop 17s 0.000s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(2) {
    animation: prop 17s -16.227s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(3) {
    animation: prop 17s -15.455s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(4) {
    animation: prop 17s -14.682s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(5) {
    animation: prop 17s -13.909s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(6) {
    animation: prop 17s -13.136s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(7) {
    animation: prop 17s -12.364s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(8) {
    animation: prop 17s -11.591s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(9) {
    animation: prop 17s -10.818s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(10) {
    animation: prop 17s -10.045s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(11) {
    animation: prop 17s -9.273s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(12) {
    animation: prop 17s -8.500s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(13) {
    animation: prop 17s -7.727s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(14) {
    animation: prop 17s -6.955s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(15) {
    animation: prop 17s -6.182s linear infinite;
}
.animation_demo .wrapper div:nth-of-type(16) {
    animation: prop 17s -5.409s linear infinite;
}
.animation_demo .wrapper...