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.

Cara Mudah Menambahkan Animasi CSS

Animate.css adalah animasi CSS yang siap pakai dan tidak perlu susah susah untuk membuat animasi CSS bagi sobat yang kurang paham dalam memainkan CSS karena dengan bantuan dari animate.css ini sobat dapat dengan mudah menambahkan animasi dengan sangat mudah. Beberapa animasi dari animate.css ini sangat lengkap menurut saya dari fadedin dan fadedout bahkan shakes juga ada.

Untuk menggunakannya sangat mudah, sobat tinggal menambahkan class yang telah disediakan oleh animate.css dan element yang sobat beri classpun akan bergerak sesuai dengan tipe animasi yang dipilih.

animate.css yang dibuat oleh Dan Eden ini menggabungkan beberapa fitur dari CSS3 seperti animation (keyframes), transformation, dan transition, semuanya dikemas dalam class-class siap pakai, jadi jika sobat ingin menambahkan animasi sederhana, tidak perlu repot lagi membuatnya secara manual, cukup sertakan file animate.css dan tambahkan class animasi yang diinginkan.

animate.css dapat didownload di daneden.me/animate/. disana sobat dapat mendownload seluruh library atau memilih animasi apa saja yang sobat butuhkan dengan melakukan “Custom Build”. sobatpun dapat melihat contoh animasinya dengan mengklik tipe-tipe animasi yang ada dan perhatikan animasi yang akan dihasilkan.

Saat ini animate.css hanya dapat berjalan dengan baik untuk browser-browser terbaru, seperti Chrome, safari, firefox dan IE10. Mengingat animate.css menggunakan CSS3 untuk menjalankan animasinya.

Cara Mudah Menambahkan Animasi CSS

Sobat tinggal sertakan dalam link css diatas atau pasang cssnya di kode <style> seperti ini.

<link href="animate.css" rel="stylesheet"></link>
atau
<style>
kode animasi css
</style>

Kemudian sobat tinggal menambahkan class animated dan nama animasi yang disediakan. Misalnya disini saya ingin memberikan animasi FadeInUp pada sebuah gambar, maka kodenya seperti berikut:

<img class='animated fadeInUp' src='blabla'/>

Dengan begitu gambar tersebut akan beranimasi keatas.

Mengubah Durasi, delay dan perulangan

Jika sobat ingin merubah durasi dari animasi atau menambahkan delay sebelum animasi dijalankan atau sobat ingin agar animasi dijalankan secara terus-menerus sobat dapat menamabhkan style berikut:

img{
	-webkit-animation-duration:2s;
	-webkit-animation-delay:6s;
	-webkit-animation-iteration-count:infinite;
}

Untuk animasi yang bisa digunakan sobat bisa lihat di situs dan eden karena sudah lengkap sekali untuk daftar animasi yang bisa digunakan.

Kesimpulan

animate.css dalah library Animasi CSS yang sangat keren dan cukup lengkap. Penerapannya pun tidak sulit, sobat hanya perlu menambahkan class tertentu pada elemen HTML yang ingin sobat beri Animasi.

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