Buat Animasi Ketik Sederhana

Assalamu'alaikum sahabat infoalya.com, pada postingan kali ini saya ingin berbagi sedikit tentang cara membuat animasi ketik sederhana dengan menggunakan css, untuk pengertian css sendiri sahabat dapat browsing di mbah google ya, dan sekalian mengisi waktu senggang :) baiklah kawan berikut ini kode yang digunkan :


DEMO

CSS yang digunakan :

<style>
  .container{
   width: 800px;
   margin: 30px auto;
   padding: 20px 30px;
   background: #F6CECE;
   border: 1px solid #F5A9A9;
  }
  .wadah-mengetik
  {
   font-size: 27px;
   width: 740px;
   white-space:nowrap;
   overflow:hidden;
   -webkit-animation: ketik 5s steps(50, end);
   animation: ketik 5s steps(50, end);
  }
  @keyframes ketik{
    from { width: 0; }
  }
  @-webkit-keyframes ketik{
    from { width: 0; }
  }
 </style>

Dan berikut HTMLnya :

<div class="container">
  <h2>Animasi Ketik Teks Dengan CSS</h2>
  <p><a href="https://www.infoalya.com/">Kembali ke tutorial&raquo;</a></p>
  <p class="wadah-mengetik">Ini adalah contoh animasi dengan css </p>
 </div>

Sehingga secara keseluruhan akan tampak seperti berikut :

<style>
  .container{
   width: 800px;
   margin: 30px auto;
   padding: 20px 30px;
   background: #F6CECE;
   border: 1px solid #F5A9A9;
  }
  .wadah-mengetik
  {
   font-size: 27px;
   width: 740px;
   white-space:nowrap;
   overflow:hidden;
   -webkit-animation: ketik 5s steps(50, end);
   animation: ketik 5s steps(50, end);
  }
  @keyframes ketik{
    from { width: 0; }
  }
  @-webkit-keyframes ketik{
    from { width: 0; }
  }
 </style>

<div class="container">
  <h2>Animasi Ketik Teks Dengan CSS</h2>
  <p><a href="https://www.infoalya.com/">Kembali ke tutorial&raquo;</a></p>
  <p class="wadah-mengetik">Ini adalah contoh animasi dengan css </p>
 </div>

Sekian dulu postingan singkat yang dapat admin bagikan semoga bisa bermanfaat ya :)