Membuat Animasi Efek Mengetik Teks Dengan CSS

Animasi mengetik teks biasanya dibuat dengan bantuan Jquery, namun pada artikel kali ini kita akan mencoba membuatnya hanya dengan CSS.

Animasi ini tentunya bisa digunakan jika ingin membuat semacam presentasi di website, atau untuk sekedar mempercantik halaman website.

Animasi ini juga bisanya sering kita lihat di website-website yang diretas, biasanya siperetas meninggalkan jejak dengan pesan yang seolah-olah sedang diketik.

Bagaimana Membuatnya?

Untuk membuatnya tidak terlalu sulit, cukup beberapa baris kode css maka kita bisa mendapatkan efek ketikan teks tersebut pada website kita.

Kode HTML

Berikut kode HTML yang digunakan, tambahkan ke dokumen HTML Anda:

<p class="wadah-mengetik">Welcome to Tutorial Web Design Indonesia | <a href="http://basileus7.blogspot.com">http://http://basileus7.blogspot.com/</a></p>

Kode CSS

Untuk kode CSS nya kita menggunakan CSS Animation yang merupakan fitur dari CSS3 :

.wadah-mengetik
{
 font-size: 22px;
 width: 740px;
 white-space:nowrap;
 overflow:hidden;
 -webkit-animation: ketik 5s steps(50, end);
 animation: ketik 5s steps(50, end);
}

@keyframes ketik{
  from { width: 0; }
}

@-webkit-keyframes ketik{
  from { width: 0; }
}

Bisa dilihat pada kode css diatas kita membuat animasi dengan nama ketikdan mengatur animasi nya pada keyframe.

Selanjutnya tambahkan overflow:hidden sehingga ketika animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks. Akhirnya kita dapat menambahkan animasi ketik dengan fungsi steps()

Animasi akan meningkatkan ukuran paragraf dari 0 sampai 740px, dalam 50 frame sehingga menciptakan efek bahwa teks yang sedang diketik.

Sekian tutorial untuk membuat efek mengetik teks kali ini, Thanks..

#NyontekWebSebelah