IT Learning, Consulting and Developing

Belajar Animasi Menggunakan CSS Murni Untuk Pemula

gambar

Otak Manusia didesain untuk tertarik melihat benda bergerak. Karena refleks alami tersebut, menjadikan salah satu alasan untuk menambahkan animasi ke situs web merupakan cara yang ampuh untuk menarik perhatian pengunjung/pengguna website Anda.

Apabila tataletak dan segala bentuknya dibuat dengan baik, animasi dapat menambahkan interaksi dan umpan balik yang bermanfaat, serta meningkatkan pengalaman pengguna website Anda.

Tujuan utama dari sebuah desain website yang baik adalah untuk memfasilitasi komunikasi manusia/pengunjung dengan Anda selaku pemilik website melalui halaman website. Jika kita melakukan pekerjaan tersebut dengan baik, maka tujuan Anda membangun sebuah website yang menarik banyak pengunjung akan tercapai.


Memulai membuat Animasi CSS

Animasi menggunakan murni CSS sangat mudah, terdiri dari 2 komponen :
Keyframe – Menentukan tahapan dan style animasi.
Animation Properties – menetapkan @keyframes untuk elemen CSS yang diinginkan dan menentukan bagaimana animasi bekerja.

Mari kita mulai membuat animasi menggunakan CSS.

Membuat Block #Keyframes

Keyframe adalah dasar untuk membuat animasi pada CSS. Disana kita akan mendefinisikan animasi layaknya sebuah timeline. Setiap @keyframe terdiri dari:

Nama animasi : Sebuah nama untuk menggambarkan mengenai animasi yang hendak kita buat. Sebagai contoh, bounceIn.

Tahapan animasi : Setiap tahapan dari animasi yang kita buat direpresentasikan dalam bentuk persen (%). 0% menandakan awal dari animasi dan 100% adalah akhir dari animasi.

Properti CSS : Digunakan untuk mendefinisikan setiap tahapan pada timeline animasi yang akan kita bangun.

Mari kita lihat sebuah contoh sederhana @keyframes dengan nama “bounceIn”. Pada contoh ini kita akan membuat 3 tahapan, dimulai dari (0%), dimana elemen memiliki opacity 0 dan ukuran lebih kecil 10% dari ukuran normal (menggunakan CSS transforme scale). Pada saat masuk tahapan (60%) elemen mulai terlihat dengan full opacity dan ukuran bertambah 120% dari ukuran asli. Pada tahapan final (100%), ukuran kembali ke ukuran normal.

Pertama-tama tambahkan @keyframes pada file CSS Anda.

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

embuat Block #Animasi

Setelah @keyframes telah selesai dibuat, properti animasi haris ditambahkan kedalam function Anda.

Properti animasi terdiri atas dua hal, yaitu :

Memasukan @keyframes ke dalam elemen yang hendak dibuat animasi.
Definisikan bagaimana animasi tersebut bekerja

Properti animasi ditambahkan kedalam selector CSS (atau elemen) yang ingin dibuat animasi.

Animation-name : Nama untuk animasi yang telah kita definisikan pada @keyframes
animation-duration : Durasi animasi yang Anda buat, dalam satuan detik (misal: 5s) atau milidetik (misal: 200ms).

Tambahkan CSS Anda seperti dibawah ini:

div {
  animation-duration: 2s;
  animation-name: bounceIn;
}

Script diatas membuat elemen div memiliki animasi “bounceIn” dengan durasi waktu selama 2 detik. Script diatas bisa kita sederhanakan menjadi :

div {
  animation: bounceIn 2s;
}

Dengan menambahkan @keyframes dan juga properti animasi tersebut, kita sudah memiliki sebuah animasi sederhana.

<html>
<head>
    <title>Belajar CSS di Tipamedia</title>
    <style type="text/css">
	@keyframes bounceIn {
          0% {
            transform: scale(0.1);
            opacity: 0;
          }
          60% {
            transform: scale(1.2);
            opacity: 1;
          }
          100% {
            transform: scale(1);
          }
        }
        div{
	    animation: bounceIn 2s;
        }
    </style>
</head>
<body>
	<div>Bounce In</div>
</body>
</html>

Semua properti animasi dapat Anda tuliskan secara terpisah, tetapi direkomendasikan untuk menulisnya dengan singkat.

Catatan Tentang Prefixes (imbuhan depan)

Sejak tahun 2014 lalu, sebagian besar Webkit browser masih menggunakan -webkit- sebagai prefiks untuk animasi (keuframes dan transition). Hingga mereka mengadopsi versi standart, Anda harus menambahkan imbuhan -webkit- pada CSS Anda supaya bisa berjalan di browser Webkit tersebut.

Berikut contoh penulisan menggunakan imbuhan depan.

div {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceIn { /* styles */ }
@keyframes bounceIn { /* styles */ }

Daftar Properti Animasi

  1. animation-timing-function
  2. animation-delay
  3. animation-iteration-count
  4. animation-direction
  5. animation-fill-mode
  6. animation-play-state

Mari kita bahas satu-persatu.

Animation-timing-function

Pada properti ini mendefinisikan kecepatan kurva atau animasi. Anda dapat menentukan waktu dengan mengikuti pilihan waktu yang telah ditetapkan: ease, linear, ease-in, ease-out, initial, inherit.

CSS syntax:

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

CSS shorthand syntax (penulisan sederhana)

animation: [animation-name] [animation-duration] [animation-timing-function];
animation: bounceIn 2s ease-in-out;

Script selangkapnya:

div{
    animation: bounceIn 2s ease-in-out;
}

Animation-delay

membolehkan Anda untuk menentukan kapan animasi akan dimulai. Sebuah nilai positive (misal 2s) akan membuat animasi berjalan setelah 2 detik. Elemen HTML akan tetap tidak melakukan animasi hingga waktu yang kita inputkan. Nilai negative (misal -2s) akan menampilkan animasi langsung dan animasi berjalan selama 2 detik.

CSS syntax

div{
    animation-delay: 5s;
    animation:  bounceIn 2s ease-in-out 3s;
}

animation:  bounceIn 2s ease-in-out 3s;

sama dengan

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay];

Animation-iteration-count

Menentukan jumlah berapa kali animasi akan berjalan. Nilai default perulangan adalah 1.

  1. infinite – animasi berulang terus tiada henti
  2. initial – menetapkan jumlah perulangan ke nilai default
  3. inherit – mewarisi nilai dari pendahulu

CSS syntax

animation-iteration-count: 2;

Syntax sederhana
animation:  bounceIn 2s ease-in-out 3s 2;

terdiri dari

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count];

Animation-direction

Properti meenntukan apakah animasi harus bergerak maju, mundur atau dalam siklus alternatif. Berikut nilai yang bisa digunakan.

normal (default) - animasi bergerak maju. Pada setiap siklus animasi kembali lagi ke awal (0%) dan memainkan maju lagi (hingga 100%).

reverse - animasi bergerak mundur.

alternate - animasi berbalik arah di setiap siklus. Pada setiap siklus ganjil, animasi maju (0% sampai 100%). Pada setiap siklus genap, animasi memainkan mundur (100% ke 0%).

alternate-reverse - animasi berbalik arah pada setiap siklus. Pada setiap siklus ganjil, animasi memainkan secara terbalik (100% ke 0%). Pada setiap siklus genap, animasi memainkan maju (0% atau 100%).

CSS syntax:

animation-direction: alternate;
Animation shorthand syntax (disarankan):
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];
animation:  bounceIn 2s ease-in-out 3s 3 alternate;

Animation-fill-mode

Dapat menentukan jika gaya animasi yang terlihat pada saat sebelum atau setelah memainkan animasi. Properti ini sedikit membingungkan, tetapi jika sudah mengerti itu akan sangat berguna.

Secara default, animasi tidak akan mempengaruhi gaya elemen sebelum animasi dimulai (jika ada animasi-delay) atau setelah animasi selesai. Properti animasi-fill-mode bisa mengubah perilaku ini dengan nilai yang berikut:

  1. backwards - Sebelum animasi (selama delay animasi), gaya keyframe awal (0%) yang diterapkan ke elemen.
  2. forwards - Setelah animasi selesai, gaya didefinisikan dalam keyframe akhir (100%) dipertahankan oleh elemen.
  3. both - Animasi akan mengikuti aturan untuk kedua maju dan mundur, memperluas sifat animasi sebelum dan setelah animasi.
  4. normal (default) - Animasi tidak menerapkan gaya apapun untuk elemen, sebelum atau setelah animasi.

CSS syntax:

animation-fill-mode: forwards;
Animation shorthand syntax (direkomendasikan):
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
animation:  bounceIn 2s ease-in-out 3s 3 forwards;

Animation-play-state

Menentukan apakah animasi diputar atau berhenti. Melanjutkan animasi yang dijeda dan memulai animasi di mana ia dimulai.

  1. playing - animasi saat ini sedang berjalan
  2. paused - Animasi saat ini dihentikan sementara

contoh:

div:hover {
  animation-play-state: paused;
}

Multiple Animations

Untuk menambahkan beberapa animasi untuk selector, Anda hanya memisahkan nilai-nilai dengan koma. Berikut ini contohnya:

.div {
  animation: slideIn 2s, rotate 1.75s;
}

Yup itulah animasi menggunakan CSS! Dengan properti-properti dasar, animasi mungkin Anda dapat membuat sesuatu.