Cara Membuat Animasi Warna Dengan Keyframes

Halo, jumpa lagi dengan saya, kali ini saya akan berbagi tutorial sederhana mengenai Cara Membuat Animasi Warna Dengan Keyframes, animasi ini sangat mudah sekali membuatnya, berikut langkah-langkahnya.

Pertama silahkan kalian buat struktur kode HTML seperti berikut ini.

<div class="container">
  <h1> Hello world</h1>
</div>

Kalimat diatas boleh ada atau tidak, kemudian kita bisa menambahkan kode CSS3 berikut untuk membuat animasi warna pada background.

html{
  animation: colorChanges 2s alternate infinite;
}

html,body{
    margin:0;
  height:100%;
}

@keyframes colorChanges {
  0% { color: #E3193A; }
  100% { color: #3498DB; }
}

.container{
  height:100%;
  background-color:currentColor;
}

h1{
  color:white;
  position:absolute;
  padding-left: 1em;
}

Nah, kalo sudah semua diketikan, jangan lupa disimpan kemudian jalankan dibrowser masing-masing dan lihat hasilnya. nanti akan secara otomatis berubah warna sesuai dengan setingan di CSS.

Baik sekian tutorial mengenai Cara Membuat Animasi Warna Dengan Keyframes, semoga bermanfaat, amin.

Selamat mencoba.