Cara Membuat Animasi Tulisan Mengetik Dengan CSS

Cara Membuat Animasi Tulisan Mengetik Dengan CSS

CSS memiliki banyak fitur keren yang dapat kita gunakan. Salah satunya animasi.

Di CSS3 ada fitur animation yang berfungsi untuk membuat animasi pada website hanya dengan css.

Dan kali ini saya akan membagikan contohnya, yaitu membuat tulisan mengetik dengan css.

Berikut hasil akhirnya.

Langsung saja berikut caranya.

Membuat Teks Mengetik

Buat sebuah tulisan, gunakan tag div atau p, disini saya menggunakan tag p.

Lalu beri class, terserah namanya, disini saya berinama ketik.

<p class="ketik">Teks ini mengetik, ini tulisan yang mengetik</p>

Lalu buat sebuah css terserah mau internal atau eksternal.

Lalu atur class ketik menjadi seperti berikut.

.ketik{
 font-size:30px;
 width:100%;
 white-space:nowrap;
 overflow:hidden;
 color:red;
 animation: ketik 5s steps(70, end);
}
@keyframes ketik{
 from { width: 0; }
}

Disini saya mengatur ukuran teks menjadi 30px, lalu jangan lupa atur supaya lebarnya menjadi full.

white-space berfungsi agar tulisan tetap berada dalam satu baris.

overvlow:hidden berfungsi agar tulisan yang kelewatan akan disembunyikan.

Lalu kita inisialisasi animasi dengan nama ketik dengan durasi waktu 5detik.

Nah yang terakhir kita buat keyframe yang memberikan efek mengetik pada teks.

Silahkan save, lalu buka dibrowser.

Silahkan mencoba, semoga bermanfaat.

Related Post

Comments

X