body {
  background: black;
  color: white;
  font-size: 25vmin;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spin-container {
  display: block;
  height: 1em;
  overflow: hidden;
}

.spin-transition {
  transition: transform .2s;
}

.spin-0 {
  transform: translate(0, -9%);
}
.spin-1 {
  transform: translate(0, -18%);
}
.spin-2 {
  transform: translate(0, -27%);
}
.spin-3 {
  transform: translate(0, -36%);
}
.spin-4 {
  transform: translate(0, -45%);
}
.spin-5 {
  transform: translate(0, -54%);
}
.spin-6 {
  transform: translate(0, -63%);
}
.spin-7 {
  transform: translate(0, -72%);
}
.spin-8 {
  transform: translate(0, -81%);
}
.spin-9 {
  transform: translate(0, -90%);
}
.spin-10 {
  transform: translate(0, -99%);
}

/* */
.spin-animation {
  position: relative;
  animation-name: spin;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@keyframes spin {
  0% {
    transform: translate(0, 0%);
  }
  10% {
    transform: translate(0, -10%);
  }
  20% {
    transform: translate(0, -20%);
  }
  30% {
    transform: translate(0, -30%);
  }
  40% {
    transform: translate(0, -40%);
  }
  50% {
    transform: translate(0, -50%);
  }
  60% {
    transform: translate(0, -60%);
  }
  70% {
    transform: translate(0, -70%);
  }
  80% {
    transform: translate(0, -80%);
  }
  90% {
    transform: translate(0, -90%);
  }
}