Membuat Animasi Dengan CSS 3

Membuat Animasi dengan CSS 3

Dengan CSS 3, kita dapat menganimasikan transisi dari satu style CSS ke style CSS yang lainnya. Animasi dapat dibuat hanya dengan CSS saja, bahkan tanpa JavaScript. Animasi CSS terdiri dari dua komponen:

• 1.       Style yang mendefinisikan animasi
• 2.       Satu set keyframe yang mengindikasikan state awal dan akhir animasi, serta state-state di antara awal dan akhir dari animasi bila diperlukan
• 
  

Beberapa keunggulan animasi dengan CSS antara lain:

• 1.       Mudah digunakan untuk animasi sederhana, tanpa perlu mengetahui pemrograman JavaScript
• 2.       Animasi berjalan dengan baik bahkan saat komputer sedang “bekerja keras”
• 3.       Merupakan standar web sehingga semua browser (diharapkan) support
• 4.       Tidak memerlukan plugin seperti Flash atau Silverlight
• 5.       Bisa diterapkan pada elemen HTML apa saja (gambar, teks, link, div, bahkan video)

Requirement: Kita harus tahu dasar-dasar CSS untuk bisa membuat animasi dengan CSS

Mengatur jalannya animasi

Untuk membuat animasi CSS, kita harus memberi style pada elemen HTML yang akan kita animasikan dengan properti animation atau sub-propertinya. Pengaturan ini mengatur timing dan durasi dari animasi, termasuk detail bagaimana animasi akan berjalan.

Pengaturan ini tidak mengatur bentuk yang sebenarnya dari animasi, karena detail jalannya animasi diatur pada properti @keyframe.

Sub-properti dari animation adalah:

1.  animation-delay
Mengatur jeda waktu antara di-load-nya suatu elemen HTML dan awal mula animasi
2.  animation-direction
Mengatur apakah animasi akan berjalan bolak-balik atau satu arah dari definisi
3.  animation-duration
Mengatur lamanya waktu yang dibutuhkan untuk menjalani satu siklus animasi
4.  animation-iteration-count
Mengatur berapa kali animasi dijalankan; dapat diset infinite5.  animation-name
Nama @keyframe yang mendefinisikan detail jalannya animasi
6.  animation-timing-function
Mengatur bagaimana transisi melewati keyframe
7.  animation-fill-mode
Mengatur nilai apa yang diterapkan oleh animasi sebelum dan sesudah berjalannya

Mendefinisikan deretan animasi dengan keyframe

Setelah timing dari animasi diatur, kita harus mendefinisikan tampilan animasi. Hal ini dapat dilakukan dengan membuat satu atau lebih keyframe dengan sintaks @keyframe. Setiap keyframe mengatur bagaimana elemen yang dianimasikan akan ditampilkan.

Karena timing ditentukan oleh properti animation di atas, keyframe menggunakan persentase untuk mengindikasikan waktu animasi ketika berjalan. 0% berarti awal mula animasi, dan 100% berarti akhir animasi.

Kita juga dapat membuat keyframe lain pada persentase lain, yang berarti langkah-langkah animasi.

Contoh sederhana

Contoh ini akan membuat suatu elemen HTML <h1> bergerak dari sebelah kanan browser.

Catatan: Pada properti animation kita tambahkan “-webkit-” karena animasi kita akan dijalankan di Google Chrome. Jika ingin dijalankan di Firefox juga, buat baris yang sama, tapi tambahkan “-moz-” di depan properti animation. Begitu juga pada properti @keyframe. Contoh di bawah dapat dijalankan pada Chrome, Safari, dan Firefox. Ini karena belum semua browser support animasi CSS.

<style>

  h1 {

    -webkit-animation-duration: 3s;

       -moz-animation-duration: 3s;

    -webkit-animation-name: slidein;

       -moz-animation-name: slidein;

  }

 

  @-webkit-keyframes slidein {

    0% {

      margin-left: 100%;

      width: 300%

    }

   

    100% {

      margin-left: 0%;

      width: 100%;

    }

  }

  @-moz-keyframes slidein {

    0% {

      margin-left: 100%;

      width: 300%

    }

   

    100% {

      margin-left: 0%;

      width: 100%;

    }

  }

</style>

<h1>Hello World</h1>

Style untuk elemen <h1> mengatur bahwa animasi berjalan selama 3 detik untuk berjalan dari awal sampai selesai, yang diatur pada properti animation-duration: 3s, dan bahwa nama @keyframe yang digunakan adalah “slidein”. Nama keyframe yang digunakan sifatnya bebas.

Keyframe didefinisikan dengan aturan @keyframe. Pada contoh di atas, kita hanya memiliki 2 keyframe:

1.  Yang pertama ada pada 0%. Di sini kita mengatur margin kiri dari elemen sebesar 100%, dan lebarnya 300%. Ini menyebabkan elemen ditempatkan di kanan browser
2. Yang kedua (sekaligus terakhir) ada pada 100%. Di sini kita mengatur margin kiri menjadi 0%, dan lebarnya 100%. Ini menyebabkan elemen berada di sebelah kiri browser

Dengan demikian, animasi “memperhalus” pergerakan elemen dari kanan ke kiri pada contoh di atas.

Menambahkan keyframe baru

Misalnya kita ingin menambahkan keyframe pada contoh yang sebelumnya. Misalnya kita ingin memperbesar ukuran huruf menjadi 500% di tengah-tengah animasi, kemudian mengembalikannya lagi seperti semula. Maka kita harus menambahkan ini di dalam @keyframe, misalnya pada keyframe 75%

75% {

  font-size: 500%;

  margin-left: 25%;

  width: 150%;

}

Membuat animasi berjalan terus-menerus

Untuk membuat animasi berulang terus menerus, tambahkan properti animation-iteration-count pada style elemen untuk menentukan berapa kali animasi diulang. Pada contoh ini, kita menggunakan infinite agar animasi berjalan terus menerus. Modifikasi style untuk h1 menjadi seperti berikut:

h1 {

  -webkit-animation-duration: 3s;

     -moz-animation-duration: 3s;

  -webkit-animation-name: slidein;

     -moz-animation-name: slidein;

  -webkit-animation-iteration-count: infinite;

     -moz-animation-iteration-count: infinite;

}

Membuat animasi berjalan bolak-balik

Pada contoh terakhir, animasi berjalan terus-menerus, tapi selalu mengulang dari awal (dari sebelah kanan). Untuk membuat animasi berjalan bolak balik dan tidak mengulang dari awal, tambahkan properti animation-direction pada style h1 menjadi bernilai alternate.

h1 {

  -webkit-animation-duration: 3s;

     -moz-animation-duration: 3s;

  -webkit-animation-name: slidein;

     -moz-animation-name: slidein;

  -webkit-animation-iteration-count: infinite;

     -moz-animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;

     -moz-animation-direction: alternate;

}

Mengatur fungsi timing animasi

Pada contoh di atas, animasi berjalan dalam timing yang semakin lama semakin lambat, yang disebut ease, ini defaultnya. Untuk membuat animasi berjalan linear (konstan, tidak semakin cepat atau semakin lambat), tambahkan properti animation-timing-function pada style h1 menjadi bernilai linear.

h1 {

  -webkit-animation-duration: 3s;

     -moz-animation-duration: 3s;

  -webkit-animation-name: slidein;

     -moz-animation-name: slidein;

  -webkit-animation-iteration-count: infinite;

     -moz-animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;

     -moz-animation-direction: alternate;

  -webkit-animation-timing-function: linear;

     -moz-animation-timing-function: linear;

}

Nilai-nilai yang diperbolehkan untuk fungsi timing:

·         ease

·         linear

·         ease-in

·         ease-out

·         ease-in-out

·         cubic-bezier

Silakan bereksperimen dan lihat perbedaannya.

Memberi delay pada animasi

Misalkan kita ingin menunda mulainya animasi sebanyak sekian detik (atau milidetik), maka kita dapat mengatur properti animation-delay pada style h1, misalnya diberi delay 2 detik sebelum dimulai.

h1 {

  ...

  -webkit-animation-delay: 2s;

     -moz-animation-delay: 2s;

}

Contoh yang lebih kompleks

Pada contoh ini jalannya animasi akan lebih kompleks karena banyak properti CSS yang dianimasikan pada tiap keyframe, yaitu:

·         Warna background (background-color)

·         Warna font (color)

·         Transformasi bentuk (-webkit-transform)

·         Posisi dari kiri (left)

·         Posisi dari atas (top)

Catatan: contoh ini berjalan untuk Google Chrome atau Safari (-webkit-).

<style>

@-webkit-keyframes animasi {

 0% {

   background-color: red;

   color: white;

   -webkit-transform: scale(1.0) rotate(0deg);

   left: 50px;

   top: 50px;

 }

 33% {

   background-color: blue;

   -webkit-transform: scale(2.0) rotate(-20deg);

   left: 150px;

   top: 10px;

 }

 67% {

   background-color: green;

   -webkit-transform: scale(2.0) rotate(20deg);

   left: 200px;

   top: 100px;

 }

 100% {

   background-color: red;

   -webkit-transform: scale(1.0) rotate(0deg);

   left: 50px;

   top: 150px;

 }

}

.kotak {

   -webkit-animation-name: animasi;

   -webkit-animation-duration: 4s;

   -webkit-animation-iteration-count: infinite;

   -webkit-animation-direction: alternate;

   -webkit-animation-timing-function: ease-in-out;

   padding: 20px;

   position: absolute;

   top: 50px;

   left: 50px;

}

</style>

<div class="kotak">

       The quick brown fox jumps over the lazy dog.

</div>

Credits

·         www.webkit.org/blog/324/css-animation-2/

·         https://developer.mozilla.org/en/css/css_animations