Text Shadow Animasi Pure CSS

Text Shadow Animasi Pure CSS - Efek animasi kali ini adalah bagaimana cara membuat teks bergerak atau bergeser kekanan secara infinite (tidak terbatas), namun yang kita gerakkan hanya banyangan teks dengan jarak per 10px. Ibarat Anda berjalan yang sudah pasti meninggalkan jejak kaki disetiap langkah demi langkah, terkecuali Anda bisa terbang pasti tidak ada jejak kaki atau bekas pijakan kaki (sidik jari), hehe..!!

Gerakan ini sama seperti efek »Animasi Teks Hitam Putih Dengan Marquee, hanya teks saya tumpuk dalam beberapa warna sebagai banyangan (shadow), ada 7 teks yang bertumpuk dalam satu area, namun saya pisahkan dengan warna untuk membedakan teks

Membuat tampilan teks yang menurut Anda bisa menarik perhatian pengunjung bertamu di blog Anda, efek Text Shadow Animasi Pure CSS seperti ini bisa Anda jadikan alternatif suatu saat Anda ingin membuat hiasan judul blog dengan teks bergerak seperti ini:

<style>
.text {
  margin-top:-40px;
  color:#FFFF00;
  font:bold italic 80px sans-serif;
  text-transform:uppercase;
  letter-spacing:1.4px;
  -webkit-text-stroke:3px #00FF7F;
  animation:text-shadow 3.5s ease-out infinite;
  -webkit-animation:text-shadow 3.5s ease-out infinite;
  -moz-animation:text-shadow 3.5s ease-out infinite;
  -ms-animation:text-shadow 3.5s ease-out infinite;
  -o-animation:text-shadow 3.5s ease-out infinite}

@-webkit-keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;-webkit-text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}

@-moz-keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;-moz-text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}

@keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}
</style>
<div class="text">Sahabat Blogger 77</div>