Cara Membuat Animasi Background Berubah Warna CSS3

Membuat background berubah warna memang cukup mudah untuk digunakan. Apalagi sekarang sudah ada CSS3 yang mempermudah kita dalam melakukannya.

Background berubah warna dapat menarik perhatian pengunjung jika ditempatkan dan dipergunakan dengan tepat. Dan yang pasti tampilan web kita akan lebih keren dan menarik

Kali Ini Web Design Tutorial akan memberikan tutorial untuk membuat background berubah warna.

Langkah 1: Membuat Struktur HTML

<div class="bg-anim-css3">
 
 <h6>Web Design Tutorial</h6>
 <p><a href="http://web-tutorial19.blogspot.com">http://web-tutorial19.blogspot.com</a></p>

</div>

Kita akan menampilkan Tulisan Web Design Tutorial

Langkah 2:Memberikan efek animasi menggunakan CSS

body{
background-color:#f1c40f; height:300px; width:300px;
-webkit-animation: color 5s ease-in 0s infinite alternate running;
-moz-animation: color 5s linear  0s infinite alternate running;
animation: color 5s linear  0s infinite alternate running;
}
 /* Animasi & Prefix untuk beberapa browser */
@-webkit-keyframes color{

0%{background-color:#f1c40f;}
32%{background-color:#e74c3c;}
55%{background-color:#9b59b6;}
76%{background-color:#16a085;}
100{background-color:#2ecc71;}
}
@-moz-keyframes color{

0%{background-color:#f1c40f;}
32%{background-color:#e74c3c;}
55%{background-color:#9b59b6;}
76%{background-color:#16a085;}
100{background-color:#2ecc71;}
}

@keyframes color{

0%{background-color:#f1c40f;}
32%{background-color:#e74c3c;}
55%{background-color:#9b59b6;}
76%{background-color:#16a085;}
100{background-color:#2ecc71;}
} 

Diatas dapat diartikan bahwa animasi akan dilakukan selama 5 detik dengan membuat perubahan background dalam 5 tahap dan akan diulang terus dengan perintah infinite.

HASIL

Hasil dari tutorial di atas dapat di download di sini

Sekian dan Semoga Bermanfaat