-->
Search here and hit enter....

Panduan Dasar Belajar Properti Animasi Pada CSS3

Thumbnail Animasi CSS3

Kali ini kita akan membahas salah satu properti yang sangat keren menurut saya pada CSS3 yaitu Animasi. Buat yang belum tahu apa itu CSS, penjelasan mudahnya adalah merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga lebih terstruktur dan seragam. CSS merupakan singkatan dari Cascading Style Sheet. Pada umumnya CSS digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. Pengertian lebih simplenya lagi CSS merupakan alat untuk menghias website. Sedangkan CSS3 adalah merupakan versi pembaruannya. Ada beberapa properti tambahan pada CSS3 salah satunya yang akan kita bahas saat ini yaitu CSS Animation.

CSS Animasi ini sangat erat kaitannya dengan keyframes. Keyframes merupakan alur animasi untuk mengubah style 1 ke style 2 lalu lanjut ke style 3 dan seterusnya. Beda dengan Properti Transisi yang hanya mempunyai 2 keadaan, yaitu keadaan awal dan akhir. Ya dari namanya saja sudah Animasi, tentu kita bisa lebih fleksibel membuat perubahan style sesuai keinginan kita.

Lets Code !!!

Pertama, struktur dasar yang harus kita pahami adalah seperti berikut ini.


@keyframes namaanimasi{
 from{

 }
 to{
 
 }
}

Setelah keyframes terdapat kata namaanimasi. Itu artinya kalian bebas mau menamainya apa. Contoh tersebut jika kita hanya ingin menerapkan 2 keadaan pada animasinya, yaitu hanya from dan to. Artinya from adalah keadaan awal dan to adalah keadaan akhir. Beda lagi jika ingin menerapkan beberapa keadaan, kita bisa menggunakan menggunakan persen. Contoh:


@keyframes namaanimasi{
 0%{

 }
 50%{

 }
 100%{
 
 }
}

Nah, dengan kode di atas, kita sudah membuat tiga keadaan pada animasinya. Silahkan kalian bebas memodifikasinya. Bisa menggunakan empat, lima atau lebih. Tinggal kalian atur sendiri persenannya.

Untuk contoh kasus penerapan sederhana, saya akan membuat animasi perubahan color pada background. Mari kita coba buat bersama-sama. Siapkan code editor kalian masing-masing, berikut kodenya.


<!DOCTYPE html>
<html>
<head>
 <title>Belajar Animasi CSS3</title>
 <style>
  body {
   animation: colorBackground 20s infinite;
  }
  @keyframes colorBackground {
   0% { background-color: #36393e ; }
   20% { background-color: #800000; }
   40% { background-color: #670234 ; } 
   60% { background-color: #00028d; }
   80% { background-color: #161616; } 
   100% { background-color: #36393e ; }
  }
 </style>
</head>
<body>
</body>
</html>

Save kode di atas lalu lihat hasilnya. Warna tampilan background akan berubah-ubah sesuai kode warna di atas tadi.

Percobaan contoh kasus sederhana sudah selesai. Saatnya kita membahas masing-masing kode CSS Animasi di atas. Seperti biasa @keyframes merupakan kunci dari CSS animasi, dilanjutkan setelahnya yaitu nama animasinya. Pada kode di atas nama animasinya adalah colorBackground. Setelah itu isinya, yaitu penerapan style-style keadaan yang mau kita animasikan. Terdapat enam keadaan perubahan style di atas yakni perubahan warna background. Keadaan pertama diwakili oleh 0% dan seterusnya.

Nah dengan penjelasan di atas, sebenarnya kita sudah membuat animasinya. Namun masih belum menerapkannya. Dalam penerapan animasi contoh di atas terdapat pada bagian body. Yaitu ditulis dengan kata animation lalu di isi dengan beberapa nilai di dalamnya. Berikut penjelasan nilai-nilai pada CSS Animasi.

  • Nama animasi. Dalam contoh di atas yaitu colorBackground.
  • animation-duration: Durasi animasi. Total durasi dari awal hingga akhir. Dalam contoh di atas adalah 20 detik yang ditulis dengan 20s.
  • animation-timing-function: Mengatur kecepatan animasi. Ada beberapa nilai yaitu linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier.
  • animation-delay: Durasi sebelum animasi dimulai. Contoh: 3s dsb.
  • animation-iteration-count: Jumlah penambahan atau pengulangan pada animasi. Kita bisa mengisinya menggunakan angka ataupun menggunakan infinite untuk mengulang terus-menerus. Pada contoh di atas, kita menggunakan infinite.
  • animation-direction: Untuk mengubah arah loop dari awal hingga akhir, atau dari akhir ke awal, atau keduanya. Nilai defaultnya adalah normal, yaitu animasi berjalan dari awal hingga akhir. Nilai kebalikannya adalah reverse, yaitu animasi berjalan dari akhir ke awal. Nilai selanjutnya adalah alternate yang mana bisa dikatakan penggabungan dua nilai di atas, yaitu animasi berganti-ganti, pertama dari awal ke akhir, lalu dari akhir ke awal. Lawannya adalah alternate-reverse, yaitu dari akhir ke awal dulu, baru dari awal ke akhir.
  • animation-fill-mode: Untuk menentukan style pada elemen setelah animasi kita selesai. Ada beberapa nilai di dalamnya yaitu none, forwards, backwards dan both. None merupakan nilai default. Sedangkan dengan forwards, ia akan membuat animasi kita berhenti pada keadaan akhir. Biasanya pada animasi dengan iteration-count satu kali otomatis akan kembali ke keadaan awal. Namun dengan nilai forwards, akan membuat animasinya berhenti di keadaan akhir. 

Demikian nilai-nilai pada properti CSS Animasi. Memang dalam contoh kode kita di atas tidak diterapkan semua. Nah, tugas kalian adalah memahaminya lalu menerapkannya apa-apa yang belum diterapkan tadi. Untuk style perubahan animasinya bisa kalian kreasikan sendiri. Misal kalian mau animasikan perubahan bentuk pada gambar. Yang awalnya berukuran lebar 100px lalu diubah menjadi 200px dan seterusnya. Silahkan kalian kembangkan dan imajinasikan sendiri sesuai keinginan kalian masing-masing. Acuannya adalah keterangan di atas tadi.

Info Penting!!!

Berhubung CSS3 merupakan pembaruan dari CSS sebelumnya, ada beberapa browser lama yang tidak support terhadap properti-properti pada CSS3 tentu salah satunya CSS Animasi ini. Dalam rangka mengatasi hal itu, maka bagi kita diharuskan untuk memasang CSS Vendor Prefix. Guna memberi tahu si browser bahwa ini loh ada properti baru. Berikut kode Vendor Prefix pada browser popular.

  • -webkit- (Untuk Chrome, dan Safari)
  • -moz- (Untuk Firefox)
  • -o- (Untuk Opera versi lama)
  • -ms- (Untuk Internet Explorer)

Untuk penerapannya seperti di bawah ini. Kita akan menggunakan contoh kode dari CSS Animasi perubahan color background di atas.


<style type="text/css">
 body {
  animation: colorBackground 20s infinite;
  -webkit-animation: colorBackground 20s infinite; 
 }
 @keyframes colorBackground {
  0% { background-color: #36393e ; }
  20% { background-color: #800000; }
  40% { background-color: #670234 ; } 
  60% { background-color: #00028d; }
  80% { background-color: #161616; } 
  100% { background-color: #36393e ; }
 }
 @-webkit-keyframes colorBackground {
  0% { background-color: #36393e ; }
  20% { background-color: #800000; }
  40% { background-color: #670234 ; } 
  60% { background-color: #00028d; }
  80% { background-color: #161616; } 
  100% { background-color: #36393e ; }
 }
</style>

Seperti itu contoh penulisannya. Jadi jangan heran jika suatu saat CSS kalian tidak bekerja saat membuka di browser. Mungkin saja browser kalian belum support. Gunakanlah CSS Vendor Prefix ini.

Terakhir, agar supaya kalian semakin memahami tentang CSS Animasi ini, ada contoh kasus bonus yaitu animasi preloader. Biasanya digunakan pada web atau blog untuk style saat loading. Silahkan kalian amati dan pahami dengan teliti. Kode-kodenya gak jauh beda dengan di atas. Berikut kodenya.


<!DOCTYPE html>
<html>
<head>
 <title>Belajar Animasi CSS3</title>
 <style>
  /* Preloader */
  #preloader{
   overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999
  }
  .spinner{
   position:absolute;top:50%;left:49%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)
  }
  [class^="ball-"]{
   position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0
  }
  @keyframes circleRotate{
   0%{
    transform:rotate(0deg)
   }
   100%{
    transform:rotate(1440deg)
   }
  }
  .ball-1{
   z-index:-1;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)
  }
  .ball-2{
   z-index:-2;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)
  }
  .ball-3{
   z-index:-3;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)
  }
  .ball-4{
   z-index:-4;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)
  }
  .ball-5{
   z-index:-5;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)
  }
  .ball-6{
   z-index:-6;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)
  }
  .ball-7{
   z-index:-7;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)
  }
  .ball-8{
   z-index:-8;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)
  }
 </style>
</head>
<body>
 <div id='preloader'>
 <div class='spinner'>
  <span class='ball-1'></span>
  <span class='ball-2'></span>
  <span class='ball-3'></span>
  <span class='ball-4'></span>
  <span class='ball-5'></span>
  <span class='ball-6'></span>
  <span class='ball-7'></span>
  <span class='ball-8'></span>
 </div>
 </div>
</body>
</html>

Save lalu lihat hasilnya.

Sekedar info tambahan tentang kode di atas biar tidak terlalu bingung. Mengenai CSS Selector [class^="ball-"] maksudnya adalah dia mengambil seluruh class yang berisi kata ball-. Di sana ada sekitar 8 class  yang dimulai atau mempunyai kata ball-.

Oke, semoga informasi di atas sangat membantu kalian untuk memahami properti Animasi pada CSS3. Sebenarnya masih sangat banyak style animasi, karena sudah banyak orang yang berkreasi untuk melengkapi web atau blognya menjadi lebih bagus dan keren.

"Teruslah berkreasi meskipun tak sebaik setidaknya sebanyak mungkin. Pasti ada yang terbaik di antaranya".
Click to Comments