Cara Membuat Baground Color Animation

Assalamualaikum.
Kali ini saya akan kongsikan cara memasang baground color Animation
Ada yang bertanyakan cara membuat Animation baground color seperti yang saya gunakan di blog ini.

Login ke blogger anda dan tab padah Theme > Edit html dan Tambahkan css kod berikut ke dalam css anda:

/* Animation */
.ripplelink{position:relative;overflow:hidden;transition:all 0.2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;transform:scale(0)}.animate{animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}
.liverain{display:block;overflow:hidden;margin:30px auto 0 auto;border-bottom:7px dotted rgba(0,0,0,0.08)}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}

Seterusnya cari css style yang anda ingin jadikan Animation dan gantikan background color nya seperti code di bawah:

background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite;display:block;

Setelah selesai mengedit, simpan template anda dan lihat hasilnya.
Senang bukan.

Untuk demonya Boleh di lihat di dalam blog ini.

Thanks,
O4U Admin