Cara Membuat Gambar Postingan Ber-background Gradient Animation

KURAZONE ~ Halo sahabat Kurazer, artikel kali ini merupakan artikel lanjutan dari artikel sebelumnya, yaitu : Cara Membuat Gambar Postingan Ber-background Solid maupun Gradient. Di artikel kali ini, kita akan belajar tentang Cara Membuat Gambar Postingan Ber-background Gradient Animation. Intinya, gambar postingannya ada warna gradasi (perpaduan 2 warna/lebih) yang digerak-gerakin gitu (dianimasikan).

Lihat perbandingan 2 contoh dibawah ini :

GRADASI SEBELUM DIANIMASIKAN

GRADASI SESUDAH DIANIMASIKAN

Nah, langsung saja.

Berikut adalah Cara Membuat Gambar Postingan Ber-background Gradient Animation
1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan diatas kode ]]></b:skin> :

@-webkit-keyframes nama-animasi{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
@-moz-keyframes nama-animasi{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
@keyframes nama-animasi{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
.kurazonegg {background:linear-gradient(to left,#0BD3FF,#FFA00B);
padding:20px;
background-size: 400% 400%;
-webkit-animation: nama-animasi 5s linear infinite;
-moz-animation: nama-animasi 5s linear infinite;}

3. Simpan Template
4. Masuk ke Menu Postingan (buatlah entri baru atau edit entri lama)
5. Gunakan kode HTML dibawah ini untuk memanggil gradasi animasinya.

<div class="kurazonegg"><center>
KODE GAMBAR NYA DISINI
</center></div>

6. Publish artikelnya, lalu lihat hasilnya.

Note :
1 Silahkan kalian ganti kode to left,#0BD3FF,#FFA00B. Kode ini untuk mengatur direksi dan warna gradasi. Kalian bisa mengubahnya sesuai warna yang kalian inginkan.
Misalnya : to left,red,blue - Hasilnya akan seperti dibawah ini :

Contoh penggunaan to left,red,blue

2 Sedangkan untuk mengatur kecepatan animasinya, perhatikan 2 baris kode dibawah ini :
-webkit-animation: nama-animasi 5s linear infinite;
-moz-animation: nama-animasi 5s linear infinite;

Kedua baris tersebut harus memiliki settingan yang sama supaya kompak.
-webkit : untuk mengatur tampilan ketika diakses menggunakan chrome atau opera
-moz : untuk mengatur tampilan ketika diakses menggunakan mozilla

Setting kode 5s untuk mengatur durasi (detik) nya.
Dibawah ini adalah contoh perbedaan animasi 1s (1 detik),  5s (5 detik) dan 10s (10 detik)

Contoh penggunaan 1s (1 detik)

Contoh penggunaan 5s (5 detik)

Contoh penggunaan 10s (10 detik)

Nah, sisanya bisa kalian kembangkan sendiri ya.., Jika kalian ingin lebih memahami tentang direksi animasi gradasi atau direksi gradasi tanpa animasi. Kalian bisa membaca panduan lebih detailnya di salah satu artikel dibawah ini :
- Cara Membuat Background Gradasi Linear CSS3 di Blog
- Cara Membuat Animasi Background Gradasi Linear CSS3 pada Blog

Next Tutorial :

Cara Membuat Gambar Postingan Ber-background Image Animation

Itulah informasi mengenai "Cara Membuat Gambar Postingan Ber-background Gradient Animation", selamat mencoba dan semoga bermanfaat. Goodluck !!