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