Cara Membuat Animasi Background Gradasi Linear CSS3 pada Blog

KURAZONE ~ Halo sahabat Kurazer, jumpa lagi dengan admin ganteng sejagat raya. Pada kesempatan kali ini kita akan belajar mengenai Cara Membuat Animasi Background Gradasi Linear CSS3 pada Blog. Dalam artikel ini saya ingin memberikan sedikit penjelasan mengenai property yang terdapat pada kode animasi, namun apabila kalian tidak sabar ingin segera membuat animasi background gradasi, kalian bisa klik "SAYA" untuk langsung menuju ke poin pada artikel ini.

Dalam menciptakan animasi, ada beberapa property yang perlu kita pahami agar dapat menciptakan pergerakan animasi yang sesuai keinginan, diantaranya adalah :
1. Bentuk Animation Timing dan property nya
2. Bentuk @keyframes dasar
3. Fungsi -webkit dan -moz animation

1. Bentuk Animation Timing

  1. ease - Animasi bergerak lambat diawal, kemudian cepat dan berakhir lambat lagi
  2. linear - Animasi bergerak dengan kecepatan yang sama dari awal hingga akhir
  3. ease-in - Animasi bergerak lambat hanya diawal saja
  4. ease-out - Animasi bergerak lambat hanya diakhir saja
  5. ease-in-out - Animasi bergerak lambat hanya diawal dan diakhir
  6. cubic-bezier(n,n,n,n) - Animasi yang bergerak sesuai kecepatan cubic-bezier

Keterangan :

  1. Property pada cubic-bezier ditentukan oleh bentuk kurva, lihat di halaman http://cubic-bezier.com untuk menentukan nilai dari property (n,n,n,n). Property tersebut diisi dengan angka sesuai dengan bentuk kurva yang telah dibuat.
  2. Cara menggunakan kurva pada situs http://cubic-bezier.com adalah dengan menggerakkan poin hijau dan poin merah/pink untuk mendapat nilai kurva. Klik "GO" untuk melihat hasilnya. 
  3. Copy angka - angka yang ditampilkan agar bisa digunakan pada pengaturan cubic-bezier. Contoh : cubic-bezier(n,n,n,n) menjadi cubic-bezier(0.47, 0, 0.75, 0.72)
  4. Jadi, ketika mengisi property pada cubic-bezier tersebut kita tidak boleh ngawur dalam mengisi angka - angkanya. Jika ngawur, maka pergerakan animasinya tidak bisa diartikan.
Berikut ini adalah beberapa contoh dari Animation Timing dengan pengaturan sebagai berikut :
animation: nama-animasi 10s ease infinite;}
animation: nama-animasi 10s linear infinite;}
animation: nama-animasi 10s ease-in infinite;}
animation: nama-animasi 10s ease-out infinite;}
animation: nama-animasi 10s ease-in-out infinite;}
animation: nama-animasi 10s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;}

DEMO :

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier

Sekedar Informasi :

Dalam contoh - contoh diatas ada 3 property yang harus kalian pahami juga fungsinya, yaitu :
  1. Infinite, artinya animasi akan selalu terulang secara terus menerus (unlimited)
  2. 10s (seconds), artinya 10 detik. Semakin sedikit nominalnya maka semakin cepat pergerakan animasinya. Kehadiran seconds bisa tanpa infinite, namun kehadiran infinite harus berdampingan dengan seconds.
    Jika kita menggunakan 10s ease infinite;}, maka animasi akan terulang kembali secara terus menerus setelah 10 detik.
    Jika kita menggunakan 10s ease;}, maka animasi hanya terjadi dalam waktu 10 detik saja, dan tidak terulang kembali.
    Jika kita menggunakan ease infinite;}, maka ... emmbb apa yang mau dianimasikan..?
  3. nama-animasi, adalah....... Lanjut membaca saja (karena sudah dijelaskan dibawah)

2. Bentuk @keyframes dasar

Bentuk @keyframes ini menciptakan ID yang nantinya akan dipanggil pada selektor

Bentuk penggunaan @keyframes :

@keyframes nama-animasi{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}

Bentuk pemanggilan @keyframes :

.nama-selektor (animation: nama-animasi */diikuti dengan property lainnya/*)
nama-animasi, artinya adalah property yang dipakai untuk pemanggilan ID animasi pada @keyframe itu sendiri. Property ini bisa kalian ganti sesuai yang kalian inginkan asal sesuai dengan ID pada @keyframe nya. Sehingga jika @keyframes mantanterindah{, maka pemanggilannya adalah animation: mantanterindah
Lihat contoh dibawah ini :
@keyframes mantanterindah{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
.nama-selektor{
background:linear-gradient(to left,blue,red);
background-size: 400% 400%;
animation: mantanterindah 10s ease infinite;}

3. Fungsi -webkit dan -moz animation

Agar animasi berjalan pada semua browser maka kita perlu menggunakan property -webkit dan -moz animation
  1. -webkit agar dapat tampil pada browser Chrome, Safari dan Opera
  2. -moz agar dapat tampil pada browser Mozila
Sehingga kita perlu menggunakan kedua property ini agar animasi dapat tampil pada browser - browser tersebut

Bentuk penggunaan pada @keyframes :

@-webkit-keyframes nama-animasi{}
@-moz-keyframes nama-animasi{}

Bentuk pemanggilan @keyframes :

-webkit-animation: nama-animasi */diikuti dengan property lainnya/*;
-moz-animation: nama-animasi */diikuti dengan property lainnya/*}
Nah, sekarang poin dari Artikel ini, yuks buat Animasinya..

Cara Membuat Animasi Background Gradasi Linear CSS3 pada Blog

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode @keyframes dibawah ini lalu letakkan (paste) tepat diatas kode </style>
Kode @keyframes ini cukup dimasukkan 1x pada template.
@-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%}
}
3. Tentukan selektor mana yang ingin kalian animasikan backgroundnya, misalnya selektor h1
4. Copy kode dibawah ini lalu letakkan (paste) kedalam property selektor yang diinginkan.
Kode dibawah ini juga bisa digunakan pada beberapa selektor yang ingin dianimasikan backgroundnya
background:linear-gradient(to left,blue,red);
background-size: 400% 400%;
-webkit-animation: nama-animasi 10s linear infinite;
-moz-animation: nama-animasi 10s linear infinite;

Misal :

h1 {font-size:20px;
KODE NYA DITARUH DISINI
}

AKAN MENJADI :

h1 {font-size:20px;
background:linear-gradient(to left,blue,red);
background-size: 400% 400%;
-webkit-animation: nama-animasi 10s linear infinite;
-moz-animation: nama-animasi 10s linear infinite;
}
5. Simpan Template

Note :
  1. Selektor bisa memiliki berbagai macam jenis, seperti h1, h2, header, wrapper, footer, sidebar, body dan sebagai. Silahkan tentukan sendiri selektor mana yang ingin kalian animasikan backgroundnya
  2. Ubah direction dan warna pada kode (to left,blue,red). Penjelasan mengenai kode ini sudah dibahas pada artikel : Cara Membuat Background Gradasi Linear CSS3 di Blog
  3. Tentukan juga berapa detik animasi nya berjalan, ubah kode 10s nya
  4. Untuk kode background-size: 400% 400%; berfungsi sebagai zoom background, pengaturan nya harus lebih dari 100%. Kalian bisa mengubahnya asal nominalnya lebih dari 100%
  5. nama-animasi boleh kalian ubah sesuai @keyframes nya
  6. Ubah juga linear nya sesuai Animation Timing yang telah dibahas diatas
  7. Sisanya bisa kalian explore sendiri

Contoh H1 dan H2 yang dianimasikan backgroundnya

Ini adalah Heading 1
Ini adalah Heading 2

Itulah Informasi mengenai "Cara Membuat Animasi Background Gradasi Linear CSS3 pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck ! Jangan lupa untuk meninggalkan komentar ya....







Lebih baru Lebih lama