Cara Membuat Efek Text Mengetik Dengan CSS

Pernah melihat animasi teks yang tiba tiba mengetik sendiri? jika sobat pernah melihatnya pasti agak aneh kok bisa teksnya menulis sendiri dan sangat penasaran sekali dengan teks yang tiba tiba mengetik sendiri itu yang pastinya ada sesuatu dibalik layar di situs atau webnya bukan membalikkan layar monitor sobat yah. Kenapa teks tersebut bisa mengetik sendiri? Disini ada dua cara yaitu dengan Javascript dan CSS jadi jika ingin membuat sebuah teks mengetik sobat bisa mengunakan javascript atau css bisa dipilih salah satunya.

Untuk yang satu ini saya membahas dengan CSS jadi ngak perlu tambahan javascript sama sekali melainkan animation CSS dengan mengunakan animation maka dapat melakukan manipulasi dengan sesuai keinginan sobat tentu saja hal ini akan sulit bagi sobat yang masih awam dalam css tapi tidak perlu kawatir karena saya akan menjelaskan nya.

Cara Membuat Efek Text Mengetik 

Hal pertama yang harus sobat lakukan adalah membuat HTML atau kode pemanggilnya dulu karena bila css dulu apa yang ingin di panggil? tentu saja hal ini dapat membuat bingung bila tidak sesuai dengan prosedur.

<div class="animasi">Hallo, Sobat Alpukoding...</div>

Kemudian tambahkan kode css untuk membuat animasi efek mengetik seperti berikut:

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

Kenapa nama animation nya animasi? karena disini kita memanggil kode dari class pada html jadi jika kode class pada html beda maka sobat harus merubahnya menjadi sama.

See the Pen CSS Typing by Kang Iyan (@KangIyan) on CodePen.