Selamat Datang

Membuat Animasi Backround 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.

animasi background website

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

Artikel Terkait:

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

Sekian

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

Salam Web Design & Development Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

25 thoughts on “Membuat Animasi Backround Website Barubah-Ubah Warna

  1. rendy says:

    om bos maksud dari 0% 32% 55% itu maksud nya apa sih om ?

    • Animasi akan dilakukan selama 5 detik, persentase itu adalah persentase dari 0 detik (atau 0%) s/d 5 detik(100%).
      Jadi kalau 55% berarti sekitar detik ke 2,6 background akan berubah menjadi “background-color: #9b59b6;”

  2. ferdi says:

    ini seperti ketika login di tumblr. tapi masalahnya apa ya kok nggak bisa jalan di firefox? pakai chrome bisa.

  3. min demo nya g bisa jalan untuk browser firefox, kebetulan punya pakai browser firefox ver.31

  4. forlia says:

    Bener juga nih, di firefox tidak jalan euy..

    • edwin says:

      Coba hapus script “running” pada script css: -moz-animation: color 5s linear 0s infinite alternate running;
      Jadinya: -moz-animation: color 5s linear 0s infinite alternate;

  5. NURDIANA says:

    kereenn,,, kalau boleh tanya ,, web mas ini du buat dengan software apa aja ??
    kok bisa bagus banget :D

  6. NURDIANA says:

    kereenn,,, kalau boleh tanya ,, web mas ini dIbuat dengan software apa aja ??
    kok bisa bagus banget :D

  7. […] Membuat Animasi Backround Website Barubah-Ubah Warna […]

  8. J Sebastian says:

    Mas/Mba, terima kasih jawabannya. Tapi saat ini yang ada cuma css file tidak ada javascript. Kira2x bisa diposting tidak untuk perubahan tsb (atau kalau bisa buat article baru untuk perubahan latarbelakang website dengan gambar) maklum masih baru dalam hal html. Terima kasih sebelumnya

  9. hukum islam says:

    Bener juga nih, di firefox tidak jalan euy..

  10. Nur Fajri says:

    bagus bisa saya dipraktekin nih dengan mudah

  11. FriskaResty says:

    kok backgroundnya tetep warna kuning, gak berubah warna?

  12. cepi says:

    mas kalo engiine seperti wordpress itu fungsinya buat apa ya ? dan kalo kita hanya menggunakan , code php , bootsrap aja gmana ?? mohon bantuannya

    • WordPress adalah sebuah CMS, jadi tinggal pakai saja tanpa perlu koding.

      kalau mau pake php, bootstrap saja ya tidak masalah, asal bisa membuat nya dan ada waktu untuk membuatnya.

  13. SEO says:

    Saya kembali berkunjung ke situs Anda Boss? kenalkan saya Noer Kholis bagian marketing dari DistributorSEO.co.id, terimakasih atas ilmunya?

  14. wahh keren… boleh lgsg di coba nihh di website.. anyway makasih sharing nya

  15. satria says:

    ada rekomendasi desain animasi untuk inspirasi ngak om..?

  16. kursus seo says:

    css sangat membantu, apalagi untuk desain css w3school juga banyak memberikan rekomendasi untuk desain buat web ^^

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development