@-webkit-keyframes transition-visualize {
  0% {
    background: darkcyan;
    bottom: 0%;
    -webkit-animation-timing-function: cubic-bezier(0.4, -0.3, 0.3, 1.3);
            animation-timing-function: cubic-bezier(0.4, -0.3, 0.3, 1.3);
  }
  50% {
    background: #ac0;
    bottom: 50%;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  75% {
    bottom: 75%;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 1, 1);
            animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  100% {
    bottom: 100%;
    background: red;
  }
}
@keyframes transition-visualize {
  0% {
    background: darkcyan;
    bottom: 0%;
    -webkit-animation-timing-function: cubic-bezier(0.4, -0.3, 0.3, 1.3);
            animation-timing-function: cubic-bezier(0.4, -0.3, 0.3, 1.3);
  }
  50% {
    background: #ac0;
    bottom: 50%;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  75% {
    bottom: 75%;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 1, 1);
            animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  100% {
    bottom: 100%;
    background: red;
  }
}
body {
  background: #fff;
  color: #0f4d8a;
  height: 100vh;
  margin: 0;
}

.transition-visualize {
  width: 50vw;
  height: 50vh;
  left: 25vw;
  top: 25vh;
  position: relative;
  background: #eee;
}
.transition-visualize b {
  -webkit-animation: transition-visualize 1s paused both;
          animation: transition-visualize 1s paused both;
  position: absolute;
  display: none;
  width: 2%;
  height: 0;
  padding-bottom: 2%;
  background: currentcolor;
  border-radius: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
}
.transition-visualize b:nth-child(1) {
  left: 2%;
  -webkit-animation-delay: -0.02s;
          animation-delay: -0.02s;
}
.transition-visualize b:nth-child(2) {
  left: 4%;
  -webkit-animation-delay: -0.04s;
          animation-delay: -0.04s;
}
.transition-visualize b:nth-child(3) {
  left: 6%;
  -webkit-animation-delay: -0.06s;
          animation-delay: -0.06s;
}
.transition-visualize b:nth-child(4) {
  left: 8%;
  -webkit-animation-delay: -0.08s;
          animation-delay: -0.08s;
}
.transition-visualize b:nth-child(5) {
  left: 10%;
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
.transition-visualize b:nth-child(6) {
  left: 12%;
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
}
.transition-visualize b:nth-child(7) {
  left: 14%;
  -webkit-animation-delay: -0.14s;
          animation-delay: -0.14s;
}
.transition-visualize b:nth-child(8) {
  left: 16%;
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
.transition-visualize b:nth-child(9) {
  left: 18%;
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}
.transition-visualize b:nth-child(10) {
  left: 20%;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.transition-visualize b:nth-child(11) {
  left: 22%;
  -webkit-animation-delay: -0.22s;
          animation-delay: -0.22s;
}
.transition-visualize b:nth-child(12) {
  left: 24%;
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}
.transition-visualize b:nth-child(13) {
  left: 26%;
  -webkit-animation-delay: -0.26s;
          animation-delay: -0.26s;
}
.transition-visualize b:nth-child(14) {
  left: 28%;
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
}
.transition-visualize b:nth-child(15) {
  left: 30%;
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.transition-visualize b:nth-child(16) {
  left: 32%;
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.transition-visualize b:nth-child(17) {
  left: 34%;
  -webkit-animation-delay: -0.34s;
          animation-delay: -0.34s;
}
.transition-visualize b:nth-child(18) {
  left: 36%;
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}
.transition-visualize b:nth-child(19) {
  left: 38%;
  -webkit-animation-delay: -0.38s;
          animation-delay: -0.38s;
}
.transition-visualize b:nth-child(20) {
  left: 40%;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.transition-visualize b:nth-child(21) {
  left: 42%;
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}
.transition-visualize b:nth-child(22) {
  left: 44%;
  -webkit-animation-delay: -0.44s;
          animation-delay: -0.44s;
}
.transition-visualize b:nth-child(23) {
  left: 46%;
  -webkit-animation-delay: -0.46s;
          animation-delay: -0.46s;
}
.transition-visualize b:nth-child(24) {
  left: 48%;
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
}
.transition-visualize b:nth-child(25) {
  left: 50%;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.transition-visualize b:nth-child(26) {
  left: 52%;
  -webkit-animation-delay: -0.52s;
          animation-delay: -0.52s;
}
.transition-visualize b:nth-child(27) {
  left: 54%;
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
}
.transition-visualize b:nth-child(28) {
  left: 56%;
  -webkit-animation-delay: -0.56s;
          animation-delay: -0.56s;
}
.transition-visualize b:nth-child(29) {
  left: 58%;
  -webkit-animation-delay: -0.58s;
          animation-delay: -0.58s;
}
.transition-visualize b:nth-child(30) {
  left: 60%;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.transition-visualize b:nth-child(31) {
  left: 62%;
  -webkit-animation-delay: -0.62s;
          animation-delay: -0.62s;
}
.transition-visualize b:nth-child(32) {
  left: 64%;
  -webkit-animation-delay: -0.64s;
          animation-delay: -0.64s;
}
.transition-visualize b:nth-child(33) {
  left: 66%;
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}
.transition-visualize b:nth-child(34) {
  left: 68%;
  -webkit-animation-delay: -0.68s;
          animation-delay: -0.68s;
}
.transition-visualize b:nth-child(35) {
  left: 70%;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.transition-visualize b:nth-child(36) {
  left: 72%;
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
}
.transition-visualize b:nth-child(37) {
  left: 74%;
  -webkit-animation-delay: -0.74s;
          animation-delay: -0.74s;
}
.transition-visualize b:nth-child(38) {
  left: 76%;
  -webkit-animation-delay: -0.76s;
          animation-delay: -0.76s;
}
.transition-visualize b:nth-child(39) {
  left: 78%;
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}
.transition-visualize b:nth-child(40) {
  left: 80%;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.transition-visualize b:nth-child(41) {
  left: 82%;
  -webkit-animation-delay: -0.82s;
          animation-delay: -0.82s;
}
.transition-visualize b:nth-child(42) {
  left: 84%;
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}
.transition-visualize b:nth-child(43) {
  left: 86%;
  -webkit-animation-delay: -0.86s;
          animation-delay: -0.86s;
}
.transition-visualize b:nth-child(44) {
  left: 88%;
  -webkit-animation-delay: -0.88s;
          animation-delay: -0.88s;
}
.transition-visualize b:nth-child(45) {
  left: 90%;
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.transition-visualize b:nth-child(46) {
  left: 92%;
  -webkit-animation-delay: -0.92s;
          animation-delay: -0.92s;
}
.transition-visualize b:nth-child(47) {
  left: 94%;
  -webkit-animation-delay: -0.94s;
          animation-delay: -0.94s;
}
.transition-visualize b:nth-child(48) {
  left: 96%;
  -webkit-animation-delay: -0.96s;
          animation-delay: -0.96s;
}
.transition-visualize b:nth-child(49) {
  left: 98%;
  -webkit-animation-delay: -0.98s;
          animation-delay: -0.98s;
}
.transition-visualize b:nth-child(50) {
  left: 100%;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.transition-visualize b:last-child {
  -webkit-animation: transition-visualize 3s infinite both;
          animation: transition-visualize 3s infinite both;
}
.transition-visualize b:last-child:before {
  content: '';
  position: absolute;
  width: 200vw;
  height: 1px;
  top: calc(50% - 0.5px);
  left: -100vw;
  background: rgba(0, 0, 0, 0.2);
}