Membuat animasi efek mengetik teks tidak hanya dapat dibuat dengan javascript saja, tetapi kita juga dapat membuatnya dengan CSS. Anda dapat menggunakan animasi efek mengetik teks ini untuk mempercantik website. Salah satu contohnya adalah ucapan selamat datang untuk pengunjung website.

Cara Membuat Animasi Efek Mengetik Teks dengan CSS

Berikut ini adalah cara membuat animasi efek mengetik teks dengan CSS.

  1. Silahkan ketikan tag HTML dan sintak CSS di bawah ini.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Cara Membuat Animasi Efek Mengetik Teks dengan CSS</title>
    	<style type="text/css">
    	  .welcome {
    	    font-size: 18px;
    		width: 100%;
    		white-space:nowrap;
    		overflow:hidden;
    		-webkit-animation: typing 5s steps(70, end);
    		animation: typing 5s steps(70, end);
    	  }
    	  
    	  @keyframes typing{
    	    from { width: 0; }
    	  }
    
    	  @-webkit-keyframes typing{
    	    from { width: 0; }
    	  }
    	  
    	</style>
      </head>
      <body>
        <p class="welcome">Hai, pengunjung website yang terhormat. Selamat datang di website Haniif.com.</p>
      </body>
    </html>

    Keterangan:

    • Pada sintak CSS di atas kita membuat animasi dengan nama typing. Kemudian kita mengatur animasi ini pada keyframe.
    • Pada class welcome kita menuliskan overflow: hidden; dimana berfungsi agar teks yang berada pada class welcome tidak terlihat. Sehingga kita dapat menambahkan animasi typing dengan fungsi steps().
  2. Jika sudah selesai diketikan, silahkan simpan dengan nama file ‘animasi_css.html’ di drive D:\ atau drive lain pada komputer atau PC Anda.
  3. Untuk melihat hasilnya silahkan klik kanan pada file animasi_css.html, pilih open with dan pilih browser yang akan Anda gunakan. Jika tidak ada kesalahan dalam pengetikan tag HTML dan sintak CSS di atas, maka animasi efek mengetik teks akan berjalan.

Artikel terkait: Cara Mudah Membuat Scroll Pada Tag Div dengan HTML dan  CSS

Bagaimana cukup mudah bukan membuat animasi efek mengetik teks dengan CSS? Semoga bermanfaat. :)