'Hidup di dunia ini hanya sementara..'

Animasi.. animasi juga. CSS.. CSS juga. Ayat ni mengingatkan kita.

  Demo

HIDUP  DI  DUNIA  INI  HANYA  SEMENTARA

AKHIRAT SELAMANYA

↻

HTML view ▼

<div style="height: 100px;"><div style="-webkit-backface-visibility: hidden; backface-visibility: hidden; background: #333; border-radius: 8px; color: white; font: bold 17px arial; overflow: hidden; padding-bottom: 2em; padding-top: 2em; text-align: center;"><labu>H</labu><labu>I</labu><labu>D</labu><labu>U</labu><labu>P</labu><labu>&nbsp; </labu><labu>D</labu><labu>I</labu><labu>&nbsp; </labu><labu>D</labu><labu>U</labu><labu>N</labu><labu>I</labu><labu>A</labu><labu>&nbsp; </labu><labu>I</labu><labu>N</labu><labu>I</labu><labu>&nbsp; </labu><labu>H</labu><labu>A</labu><labu>N</labu><labu>Y</labu><labu>A</labu><labu>&nbsp; </labu><labu>S</labu><labu>E</labu><labu>M</labu><labu>E</labu><labu>N</labu><labu>T</labu><labu>A</labu><labu>R</labu><labu>A</labu>
<div class="haa1" style="color: white;">AKHIRAT SELAMANYA</div>
  </div>
<div align="right" style="margin-right: 8px; margin-top: 4px;"><a href="javascript:location.reload();"><span style="background: #fce5cd; border: 1px solid; padding: 2px;">↻</span></a></div><br/></div>
<style>
labu {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  -webkit-animation: smoky 5s 3s both;
          animation: smoky 5s 3s both;
}
labu:nth-child(even) {
  -webkit-animation-name: smoky-mirror;
          animation-name: smoky-mirror;
}
@-webkit-keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@-webkit-keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
labu:nth-of-type(1) {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}
labu:nth-of-type(2) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
labu:nth-of-type(3) {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}
labu:nth-of-type(4) {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}
labu:nth-of-type(5) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
labu:nth-of-type(6) {
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}
labu:nth-of-type(7) {
  -webkit-animation-delay: 3.7s;
          animation-delay: 3.7s;
}
labu:nth-of-type(8) {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}
labu:nth-of-type(9) {
  -webkit-animation-delay: 3.9s;
          animation-delay: 3.9s;
}
labu:nth-of-type(10) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
labu:nth-of-type(11) {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}
labu:nth-of-type(12) {
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}
labu:nth-of-type(13) {
  -webkit-animation-delay: 4.3s;
          animation-delay: 4.3s;
}
labu:nth-of-type(14) {
  -webkit-animation-delay: 4.4s;
          animation-delay: 4.4s;
}
labu:nth-of-type(15) {
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s;
}
labu:nth-of-type(16) {
  -webkit-animation-delay: 4.6s;
          animation-delay: 4.6s;
}
labu:nth-of-type(17) {
  -webkit-animation-delay: 4.7s;
          animation-delay: 4.7s;
}
labu:nth-of-type(18) {
  -webkit-animation-delay: 4.8s;
          animation-delay: 4.8s;
}
labu:nth-of-type(19) {
  -webkit-animation-delay: 4.9s;
          animation-delay: 4.9s;
}
labu:nth-of-type(20) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
labu:nth-of-type(21) {
  -webkit-animation-delay: 5.1s;
          animation-delay: 5.1s;
}
labu:nth-of-type(22) {
  -webkit-animation-delay: 5.2s;
          animation-delay: 5.2s;
}
labu:nth-of-type(23) {
  -webkit-animation-delay: 5.3s;
          animation-delay: 5.3s;
}
labu:nth-of-type(24) {
  -webkit-animation-delay: 5.4s;
          animation-delay: 5.4s;
}
labu:nth-of-type(25) {
  -webkit-animation-delay: 5.5s;
          animation-delay: 5.5s;
}
labu:nth-of-type(26) {
  -webkit-animation-delay: 5.6s;
          animation-delay: 5.6s;
}
labu:nth-of-type(27) {
  -webkit-animation-delay: 5.7s;
          animation-delay: 5.7s;
}
labu:nth-of-type(28) {
  -webkit-animation-delay: 5.8s;
          animation-delay: 5.8s;
}
labu:nth-of-type(29) {
  -webkit-animation-delay: 5.9s;
          animation-delay: 5.9s;
}
labu:nth-of-type(30) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
  labu:nth-of-type(31) {
  -webkit-animation-delay: 6.1s;
          animation-delay: 6.1s;
}  
  labu:nth-of-type(32) {
  -webkit-animation-delay: 6.2s;
          animation-delay: 6.2s;
}  
  labu:nth-of-type(33) {
  -webkit-animation-delay: 6.3s;
          animation-delay: 6.3s;
}  
  labu:nth-of-type(34) {
  -webkit-animation-delay: 6.4s;
          animation-delay: 6.4s;
} 
  .haa1 {
    margin-top: -20px;
    animation: munc 12s ease-out; 
}
@keyframes munc {
 0% {
    opacity: 0; margin-top: 0px;
  }
  60% {
    opacity: 0; 
  }
  90% {
    margin-top: 0px; 
  }
  92% {
    opacity: 1; margin-top: -20px;
  }
 }
</style>

Tutup

CSS ditambah, disesuaikan untuk paparan di blog ini. Kod asal di codepen.