Anda tentu pernah melihat berbagai efek animasi pada halaman website, termasuk salah satunya efek mengetik teks. Efek ketikan teks ini biasanya sering muncul pada bagian news ticker di website berita. 

Efek mengetik teks seperti itu biasanya dibuat dengan bantuan javascript, namun kali ini jurnalweb.com akan mencoba membuatnya hanya dengan css saja, yaitu dengan fitur animasi di css.

HTML

Pertama buat terlebih dahulu tulisan yang akan dibuat animasinya, kita cukup menaruhnya pada sebuah div yang diberi nama class .animasi-teks.

"animasi-teks">Hallo, selamat datang.....div>

CSS

Kemudian kita tambahkan kode CSS untuk membuat animasi efek mengetik teks seperti berikut ini:

{
  font-size: 29px;
  width: 100%;
  white-space:nowrap;
  overflow:hidden;
  -webkit-animation: typing 5s steps(70, end);
  animation: animasi-ketik 5s steps(70, end);
}

@keyframes animasi-ketik{
  from { width: 0; }
}

@-webkit-keyframes animasi-ketik{
  from { width: 0; }
}

Terlihat disitu kita menggunakan animasi dengan nama animasi-ketik, yang dipanggil dari class .animasi-teks

Downlaod Script & Demo

Jika Anda tertarik ingin mencoba bisa melihat demo dan mendownload script nya disini.