Cara membuat animasi mengetik teks dengan CSS – 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, atau pada halaman website yang terkena hack.

animasi mengetik teks css

Animasi mengetik teks (Image: Youtube.com)

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.

<div class="animasi-teks">Hallo, selamat datang.....</div>

CSS

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

.animasi-teks {
  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.

Semoga trik singkat ini bermanfaat untuk meningkatkan skill css Anda ya..