Membuat Efek Animasi Mengetik Dengan CSS3

Halo, Ketemu lagi nih :), Apa kabarnya ? Semoga baik yah, amin.

Kemarin saya sudah menjelaskan mengenai efek animasi pada gambar, nah kali ini tidak jauh beda dengan pembahasan sebelum nya yaitu mengenai CaraÂ Membuat Efek Animasi Mengetik Dengan CSS3, Kalian pasti tau dong Efek Animasi Mengetik seperti apa ? tapi tau gak cara membuat nya ? 😀

Daripada penasaran langsung saja yuk ikuti langkah berikut ini.

1. Silahkan buka teks editornya masing-masing, kemudian coba ketikan kode HTML berikut:

<p class="mengetik">Welcome to Tutorial Web Design Indonesia | <a href="http://www.dumetschool.com">http://www.dumetschool.com</a></p>

2. Kalo sudah lanjutkan kembali untuk kode CSS berikut:

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

3. Setelah itu, jangan lupa disimpan, kemudian coba jalankan di browser nya masing-masing dan lihat hasilnya.

Mudah sekali yah ?

Baik sampai disini artikel mengenaiÂ CaraÂ Membuat Efek Animasi Mengetik Dengan CSS3, Semoga bermanfaat, amin

Selamat Mencoba 🙂

Membuat Efek Animasi Mengetik Dengan CSS3

Kategori