*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.drop {
  position: relative;
  width: 420px;
  height: 420px;
  background-color: #def;
}

.line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #111;
}
.line:nth-child(1) {
  top: 4px;
  --delay: 0s;
}
.line:nth-child(2) {
  top: 14px;
  --delay: 0.156s;
}
.line:nth-child(3) {
  top: 24px;
  --delay: 0.312s;
}
.line:nth-child(4) {
  top: 34px;
  --delay: 0.468s;
}
.line:nth-child(5) {
  top: 44px;
  --delay: 0.624s;
}
.line:nth-child(6) {
  top: 54px;
  --delay: 0.78s;
}
.line:nth-child(7) {
  top: 64px;
  --delay: 0.936s;
}
.line:nth-child(8) {
  top: 74px;
  --delay: 1.092s;
}
.line:nth-child(9) {
  top: 84px;
  --delay: 1.248s;
}
.line:nth-child(10) {
  top: 94px;
  --delay: 1.404s;
}
.line:nth-child(11) {
  top: 104px;
  --delay: 1.56s;
}
.line:nth-child(12) {
  top: 114px;
  --delay: 1.716s;
}
.line:nth-child(13) {
  top: 124px;
  --delay: 1.872s;
}
.line:nth-child(14) {
  top: 134px;
  --delay: 2.028s;
}
.line:nth-child(15) {
  top: 144px;
  --delay: 2.184s;
}
.line:nth-child(16) {
  top: 154px;
  --delay: 2.34s;
}
.line:nth-child(17) {
  top: 164px;
  --delay: 2.496s;
}
.line:nth-child(18) {
  top: 174px;
  --delay: 2.652s;
}
.line:nth-child(19) {
  top: 184px;
  --delay: 2.808s;
}
.line:nth-child(20) {
  top: 194px;
  --delay: 2.964s;
}
.line:nth-child(21) {
  top: 204px;
  --delay: 3.12s;
}
.line:nth-child(22) {
  top: 214px;
  --delay: 3.276s;
}
.line:nth-child(23) {
  top: 224px;
  --delay: 3.432s;
}
.line:nth-child(24) {
  top: 234px;
  --delay: 3.588s;
}
.line:nth-child(25) {
  top: 244px;
  --delay: 3.744s;
}
.line:nth-child(26) {
  top: 254px;
  --delay: 3.9s;
}
.line:nth-child(27) {
  top: 264px;
  --delay: 4.056s;
}
.line:nth-child(28) {
  top: 274px;
  --delay: 4.212s;
}
.line:nth-child(29) {
  top: 284px;
  --delay: 4.368s;
}
.line:nth-child(30) {
  top: 294px;
  --delay: 4.524s;
}
.line:nth-child(31) {
  top: 304px;
  --delay: 4.68s;
}
.line:nth-child(32) {
  top: 314px;
  --delay: 4.836s;
}
.line:nth-child(33) {
  top: 324px;
  --delay: 4.992s;
}
.line:nth-child(34) {
  top: 334px;
  --delay: 5.148s;
}
.line:nth-child(35) {
  top: 344px;
  --delay: 5.304s;
}
.line:nth-child(36) {
  top: 354px;
  --delay: 5.46s;
}
.line:nth-child(37) {
  top: 364px;
  --delay: 5.616s;
}
.line:nth-child(38) {
  top: 374px;
  --delay: 5.772s;
}
.line:nth-child(39) {
  top: 384px;
  --delay: 5.928s;
}
.line:nth-child(40) {
  top: 394px;
  --delay: 6.084s;
}
.line:nth-child(41) {
  top: 404px;
  --delay: 6.24s;
}
.line:nth-child(42) {
  top: 414px;
  --delay: 6.396s;
}
.line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 0;
  height: 8px;
  background-color: #111;
  transform: translateX(-50%);
  border-radius: 4px;
  -webkit-animation: lineWidth 12s var(--delay, 0s) infinite ease-in-out;
          animation: lineWidth 12s var(--delay, 0s) infinite ease-in-out;
}
@-webkit-keyframes lineWidth {
  0%, 40%, 100% {
    width: 0;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  12% {
    width: 200px;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}
@keyframes lineWidth {
  0%, 40%, 100% {
    width: 0;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  12% {
    width: 200px;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
}