SOURCE

<div class="cool">アイスクリーム</div>
<div class="cool">아이스크림</div>
<div class="cool">冰淇淋</div>
<div class="cool">Is</div>
<div class="cool">Roomijs</div>
<div class="cool">Lody</div>
<div class="cool">Iskrem</div>
<div class="cool">Saldējums</div>
<div class="cool">Fagylalt</div>
<div class="cool">Jäätelö</div>
<div class="cool">Gelado</div>
<div class="cool">Helado</div>
<div class="cool">Înghețată</div>
<div class="cool">Eis</div>
<div class="cool">Glace</div>
<div class="cool">Gelato</div>
<div class="cool">Ice cream</div>

body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 64em;
  background: #222;
}

.cool {
  position: absolute;
  top: -6vh;
  left: calc(50% - 6vh);
  width: 12vh;
  height: 12vh;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Ice_Cream_dessert_02.jpg/360px-Ice_Cream_dessert_02.jpg) 50%/cover;
  background-blend-mode: overlay;
  color: #fff;
  font: 900 1.5vh/ 12vh tahoma;
  text-align: center;
  text-shadow: 1px 1px 1px #222, -1px -1px 1px #222;
  animation: ani 32s linear infinite;
}
.cool:nth-child(1) {
  background-color: rgba(255, 5, 5, 0.25);
  animation-delay: 0s;
}
.cool:nth-child(2) {
  background-color: rgba(255, 93, 5, 0.25);
  animation-delay: -1.88235s;
}
.cool:nth-child(3) {
  background-color: rgba(255, 182, 5, 0.25);
  animation-delay: -3.76471s;
}
.cool:nth-child(4) {
  background-color: rgba(240, 255, 5, 0.25);
  animation-delay: -5.64706s;
}
.cool:nth-child(5) {
  background-color: rgba(152, 255, 5, 0.25);
  animation-delay: -7.52941s;
}
.cool:nth-child(6) {
  background-color: rgba(64, 255, 5, 0.25);
  animation-delay: -9.41176s;
}
.cool:nth-child(7) {
  background-color: rgba(5, 255, 35, 0.25);
  animation-delay: -11.29412s;
}
.cool:nth-child(8) {
  background-color: rgba(5, 255, 123, 0.25);
  animation-delay: -13.17647s;
}
.cool:nth-child(9) {
  background-color: rgba(5, 255, 211, 0.25);
  animation-delay: -15.05882s;
}
.cool:nth-child(10) {
  background-color: rgba(5, 211, 255, 0.25);
  animation-delay: -16.94118s;
}
.cool:nth-child(11) {
  background-color: rgba(5, 123, 255, 0.25);
  animation-delay: -18.82353s;
}
.cool:nth-child(12) {
  background-color: rgba(5, 35, 255, 0.25);
  animation-delay: -20.70588s;
}
.cool:nth-child(13) {
  background-color: rgba(64, 5, 255, 0.25);
  animation-delay: -22.58824s;
}
.cool:nth-child(14) {
  background-color: rgba(152, 5, 255, 0.25);
  animation-delay: -24.47059s;
}
.cool:nth-child(15) {
  background-color: rgba(240, 5, 255, 0.25);
  animation-delay: -26.35294s;
}
.cool:nth-child(16) {
  background-color: rgba(255, 5, 182, 0.25);
  animation-delay: -28.23529s;
}
.cool:nth-child(17) {
  background-color: rgba(255, 5, 93, 0.25);
  animation-delay: -30.11765s;
}

@keyframes ani {
  0% {
    z-index: 0;
    opacity: 0;
    transform: translate3d(0vw, 0vh, -32vw) scale(0);
  }
  8.33333% {
    z-index: 17;
    opacity: 0.83596;
    transform: translate3d(12.5vw, 8.33333vh, -27.71281vw) scale(0.16667);
  }
  16.66667% {
    z-index: 33;
    opacity: 0.89596;
    transform: translate3d(21.65064vw, 16.66667vh, -16vw) scale(0.33333);
  }
  25% {
    z-index: 50;
    opacity: 0.93303;
    transform: translate3d(25vw, 25vh, 0vw) scale(0.5);
  }
  33.33333% {
    z-index: 67;
    opacity: 0.96026;
    transform: translate3d(21.65064vw, 33.33333vh, 16vw) scale(0.66667);
  }
  41.66667% {
    z-index: 83;
    opacity: 0.98193;
    transform: translate3d(12.5vw, 41.66667vh, 27.71281vw) scale(0.83333);
  }
  50% {
    z-index: 100;
    opacity: 1;
    transform: translate3d(0vw, 50vh, 32vw) scale(1);
  }
  58.33333% {
    z-index: 83;
    opacity: 0.98193;
    transform: translate3d(-12.5vw, 58.33333vh, 27.71281vw) scale(0.83333);
  }
  66.66667% {
    z-index: 67;
    opacity: 0.96026;
    transform: translate3d(-21.65064vw, 66.66667vh, 16vw) scale(0.66667);
  }
  75% {
    z-index: 50;
    opacity: 0.93303;
    transform: translate3d(-25vw, 75vh, 0vw) scale(0.5);
  }
  83.33333% {
    z-index: 33;
    opacity: 0.89596;
    transform: translate3d(-21.65064vw, 83.33333vh, -16vw) scale(0.33333);
  }
  91.66667% {
    z-index: 17;
    opacity: 0.83596;
    transform: translate3d(-12.5vw, 91.66667vh, -27.71281vw) scale(0.16667);
  }
  100% {
    z-index: 0;
    opacity: 0;
    transform: translate3d(0vw, 100vh, -32vw) scale(0);
  }
}