Membuat Animasi Efek Mengetik Teks Dengan CSS

Efek mengetik

Malam, kali isi saya akan berbagi tentang cara membuat animasi efek mengetik teks dengan CSS. Jika di dalam website efek mengetik biasanya menggunakan bantuan Jquery, tapi kali ini saya akan membuat menggunakan CSS.

DEMO :

Selamat datang di Tutorial052 | http://www.tutorial052.blogspot.com

Efek mengetik ini biasanya digunakan untuk membuat semacam presentasi di website atau hanya untuk mempercantik halaman website, dan biasanya efek mengetik ini biasanya ada dalam website yang di retas atau di hack.

Langsung saja untuk tutorialnya
Berikut Code HTML yang digunakan :

<p class="wadah-mengetik">Selamat <span class="kpl3r8a217" id="kpl3r8a217_1">datang di</span> Tutorial052 | <a href="http://www.tutorial052.blogspot.com">http://www.tutorial052.blogspot.com</a></p>

Nama class .wadah-mengetik

Kemudian untuk CSS saya menggunakan CSS Animasi merupakan fitur dari CSS3
Berikut Code CSS3 yang digunakan :

.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; }
}

selesai....

DEMO :

Selamat datang di Tutorial052 | http://www.tutorial052.blogspot.com

DOWNLOAD

"Tetap berkarya sesuai selera masing-masing"

Klik Ctrl + D untuk membookmark halaman ini

 Sumber : http://www.tutorial-webdesign.com/