Membuat Efek Animasi Mengetik Pada Teks dengan CSS

Update Terakhir pada

images

Kita sekarang akan mencoba membuat animasi teks di website seolah-olah teks tersebut sedang berjalan seperti sedang diketik. Nah bagaimana cara membuatnya?

Baik teman-teman kita akan mencobanya, pertama-tama buatlah Kode HTMLnya seperti ini:

<p class="efek-ketik">Teks ini ditulis dengan memberikan efek ketikan | <a href="http://www.webhozz.com"http://www.webhozz.com</a></p>

Setelah itu tuliskan Kode CSS seperti ini:

.efek-ketik
        {
            font-size: 30px;
            width: 100%;
            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; }
        }

memberikan efek animasi dengan menggunakan @keyframes, dan juga kita memberikan overflow:hidden. Kita pelajari apa itu @keyframes ditulisan berikutnya. Nah itu dia teman-teman, bagaimana siap untuk mencoba.
Untuk melihat demonya silahkan teman-teman WebHozz lihat disini DEMO