Membuat Animasi Mengetik Teks Dengan CSS

Hallo teman-teman, dalam Tutorial kali ini saya akan membahas bagaimana cara nya membuat animasi mengetik teks dengan CSS. Biasanya animasi mengetik teks seperti ini di buat dengan bantuan jQuery tetapi dalam tutorial kali ini saya akan mengajarkan membuatnya tanpa bantuan jQuery. Animasi seperti ini biasanya di buat untuk persentasi di Website atau hanya sekedar mempercantik tampilan Website kita. Baiklah langsung saja kita masuk ke pokok pembahasanya.

Pertama buatlah Kode HTML nya seperti di bawah ini :

Pada tag p  di atas saya berikan class dengan nama tempat-mengetik.

Lalu kode CSS seperti di bawah ini :

Di mana pada kode css diatas saya membuat animasi dengan nama ketik dan mengatur animasi nya pada keyframe.

Selanjutnya tambahkan overflow:hidden sehingga ketika efek animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks tersebut. Lalu kita dapat menambahkan animasi ketik dengan fungsi steps() dan mengatur waktunya.

Animasi mengetik teks akan meningkatkan ukuran/lebar paragraf dari 0 sampai 460px, dalam 50 frame sehingga menciptakan efek teks yang sedang di ketik.

Untuk melihat hasilnya dan mengcopy kode HTML dan CSS nya silahkan klik link ini http://jsfiddle.net/bG36d/

Selamat mencoba teman-teman.....