Membuat animasi background website berubah-ubah warna

Membuat animasi background website berubah-ubah warna

Membuat animasi background website agar bisa berubah-ubah warna saat ini sangat mudah diterapkan, tentunya dengan hadirnya CSS3 khususnya fitur animasi di CSS3 membuat hal ini semakin memungkinkan untuk dibuat dengan cepat.

Background website yang berubah-ubah bisa menarik perhatian pengunjung website, tentunya bisa digunakan untuk menunjang tampilan website jika digunakan pada website yang tepat dan dengan penggunaan / penempatan animasi yang menarik.

Kali ini Tutorial-Webdesign.com akan memberikan tutorial singkat bagaimana membuat warna background website bisa berubah-ubah dengan bantuan css animation.

Artikel Terkait:

• Membuat Website Full Background
• Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery

Membuat Struktur HTML

Pada demo ini tidak ada tag html yang khusus, karena kita hanya akan fokus pada background

<div class="content">
 
 <h1>Tutorial Web Design Indonesia</h1>
 <p><a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></p>

</div>

disitu terlihat bahwa kita hanya akan menampilkan tulisan “Tutorial Web Design Indonesia”

Memberi Efek Animasi Dengan CSS

Untuk membuat background bisa berubah warna maka kita membutuhkan fitur animation dari CSS3, seperti ini kode nya

body{
 background-color: #f1c40f;
 -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 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; }
}

Disitu terlihat bahwa animasi akan dilakukan selama 5 detik dengan membuat perubahan background dalam 5 tahap dan akan diulang terus dengan perintah infinite.