Teks muncul dalam kabus

'MACAM BEST JE..'

Demo

M A C A M

B E S T

J E . .

HTML view ▼

<div style="align-items: center; background: rgb(38, 50, 56); display: flex; flex-direction: column; font-family: sans-serif; height: 32vh; justify-content: center;">
  <div class="pkata word-1">
  <span>M</span>
  <span>A</span>
  <span>C</span>
  <span>A</span>
  <span>M</span></div>
<div class="pkata word-2">
  <span>B</span>
  <span>E</span>
  <span>S</span>
  <span>T</span>
</div>
<div class="pkata word-3">
  <span>J</span>
  <span>E</span>
  <span>.</span>
  <span>.</span>
  </div></div>
<style>
.pkata {
  color: #263238;
  font-size: 0;
  line-height: 1;
}
.pkata span {
  font-size: 4rem;
  display: inline-block;
  animation: move 3s ease-in-out infinite;
}
@keyframes move {
  0% {
    transform: translate(-30%, 0);
  }
  50% {
    text-shadow: 0 25px 50px rgba(255, 255, 255, 0.85);
  }
  100% {
    transform: translate(30%, 0);
  }
}
.pkata span:nth-child(2) {
  animation-delay: 0.5s;
}
.pkata span:nth-child(3) {
  animation-delay: 1s;
}
.pkata span:nth-child(4) {
  animation-delay: 1.5s;
}
.pkata span:nth-child(5) {
  animation-delay: 2s;
}
.pkata span:nth-child(6) {
  animation-delay: 2.5s;
}
.pkata span:nth-child(7) {
  animation-delay: 3s;
}</style>

Tutup

CSS disesuaikan, dipetik dari codepen.