Cara Membuat Animasi Pada Teks Dengan CSS3

Halo, jumpa lagi dengan saya, berikut ini akan saya bagikan tutorial mengenai Cara Membuat Animasi Pada Teks Dengan CSS3, ingin tau seperti apa animasi nya ? berikut langkah-langkah nya.

Baik langsung saja, silahkan kalian buka teks editor nya masing-masing, kemudian ketikan kode HTML berikut.

<h1>
  <span>A</span>
  <span>M</span>
  <span>B</span>
  <span>o</span>
  <span>o</span>
  <span>o</span>
  <span>i</span>
  <span>!</span>
</h1>

Untuk kalimat nya silahkan kalian bisa isikan bebas, tanpa harus ngikutin kalimat diatas, setelah itu, kita buat animasi nya dengan kode CSS3 berikut.

html, body {
  width: 100%;  
  height: 100%;
  background: #76b852;
  background: -webkit-linear-gradient(to left, #76b852 , #8DC26F);
  background: linear-gradient(to left, #76b852 , #8DC26F);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  height: 100px;
}

h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 80px;
  color: #FFF;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}

h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

Kalo sudah, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasil nya. Selesai

Cukup mudah bukan ? Baik sampai disini tutorial mengenai Cara Membuat Animasi Pada Teks Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂