Membuat Animasi Background Website Barubah-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.

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.

Hasil

Anda bisa melihat dan mendownload apa yang telah kita buat dengan link dibawah ini

DEMO | DOWNLOAD

Sekian

Semoga artikel singkat ini bisa berguna untuk anda dalam mempelajari fitur-fitur yang ada di CSS3

Salam Web Design & Development Indonesia

Tweet