TUTORIAL - CSS: Mengenal Animasi pada CSS 3 (bag. 1)

Tampilan website kita akan lebih menarik jika memiliki unsur animasi di dalamnya. Website formal seperti company profile membutuhkan gerakan animasi yang elegan, website untuk kalangan remaja membutuhkan animasi yang variatif dan sebagainya. Namun, tidak hanya untuk kebutuhan tampilan saja, melainkan juga untuk pemaknaan.

Animasi pada pemrograman web digunakan juga untuk membuat berbagai simulasi seperti pada bidang pendidikan, musik, olah-raga, data, chart, game, persentasi dan masih banyak lagi. Dunia sedang berlomba membuat animasi pada website, mereka beradu keterampilan untuk membuat animasi yang cerdas, unik, smooth, ramah browser dan bermanfaat. Kita tidak boleh tertinggal =)

CSS menawarkan solusi yang mudah untuk membuat elemen bergerak pada website. Tampaknya, animasi pada CSS juga pilihan yang tepat untuk memulai pengenalan dasar-dasar animasi. Berikut ini adalah cara membuat dan menggunakan animasi pada CSS.

===================================================================================

1. @keyframes

Animasi dibuat di dalam sebuah ‘rule’ CSS yang bernama @keyframes:

@keyframe namaAnimasi {

/* Bentuk animasi */

}

Idenya adalah membuat gerakan perubahan tampilan suatu elemen dari bentuk satu ke bentuk lain. Ada dua cara untuk melakukan ini:

a. Menggunakan kata ‘from’ dan ‘to’. Dalam bahasa kita berarti: “dari mana – kemana”. b. Menggunakan pembagian waktu animasi dalam hitungan persen (%).

Contoh dengan metode ‘from-to’:

@keyframe namaAnimasi {

From { color: white; }
To { color: red; }

}

Contoh dengan metode hitungan waktu dalam persen (%):

@keyframe namaAnimasi {

0% { color: white; }
50% { color: red; }
100% { color: green; }

}

Seperti yang dapat dilihat perbedaannya, dengan metode ‘from-to’, kita hanya bisa memiliki dua bentuk saja, awal (0%) dan akhir (100%). Sementara dengan metode persen kita bisa menggunakan lebih banyak bentuk perubahan.

Ada banyak properti CSS yang dapat digunakan untuk membuat animasi. Misalnya merubah nilai posisi, ukuran, warna, transparansi, border, shadow dan sebagainya. Silahkan bereksperimen dan berkarya sendiri.

2. Penggunaan animasi dalam @keyframes

Animasi dalam @keyframes diletakkan ke dalam deklarasi elemen dengan menggunakan properti-properti ‘animation’:

#elemen {

/* Style dasar elemen */
background-color: black;
color: white;

/* Nama Animasi */
animation-name: namaAnimasi;

/* Setting Animasi */
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation- direction: alternate;

}

Atau secara singkat:

#elemen {

/* Style dasar elemen */
background-color: black;
color: white;

/* Animasi */
animation: namaAnimasi 1s linear 2s infinite alternate;

}

/*

Syntax untuk properti ‘animation’ adalah (perhatikan urutannya):

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

*/

Mengenal nilai-nilai pada properti ’animation’.

animation-name Nama dari animasi yang Anda buat, yang diletakkan setelah @keyframes. Pada contoh, nama animasi kita adalah ‘namaAnimasi’.

animation-duration Untuk menentukan berapa lama animasi berjalan, satuannya s (second). Ini berhubungan dengan kecepatan seluruh gerakan, jadi dengan kata lain: Menentukan seberapa cepat keseluruhan animasi bergerak.

animation-timing-function Lain dengan durasi, timing-function ini untuk membagi-bagi tingkat kecepatan suatu gerakan animasi. Nilainya sebagai berikut:

- linear: kecepatan sama/tidak berubah. - ease: lambat-cepat-lambat. - ease-in: lambat-cepat. - ease-out: cepat-lambat. - ease-in-out: lambat. - cubic-bezier(n,n,n,n): menentukan sendiri kecepatannya. Nilai n dari 0 sampai 1.

animation-delay Waktu yang dibutuhkan sebelum animasi dimulai. Satuannya s (second).

animation-iteration-count Berapa kali animasi akan dijalankan.

animation-direction Arah gerakan animasi, nilainya sebagai berikut:

- reverse: ke arah berlawanan dari yang ditentukan. - alternate: maju-mundur-maju dst.

animation-play-state - paused: Untuk mem-‘pause’ animasi. - running: Untuk menjalankan kembali animasi.

3. Contoh untuk praktek

<!DOCTYPE html>
<html>

<head>

<style>

/* Untuk Mozilla */

@keyframes namaAnimasi {

	0%   { left:0px; top:0px; }
	25%  { left:50px; top:50px; }
	50%  { left:100px; top:0px; }
	75%  { left:150px; top:50px; }
	100%  { left:200px; top:0px; }

}

/* Untuk Chrome */

@-webkit-keyframes namaAnimasi {

	0%   { left:0px; top:0px; }
	25%  { left:50px; top:50px; }
	50%  { left:100px; top:0px; }
	75%  { left:150px; top:50px; }
	100%  { left:200px; top:0px; }

}

#elemen {

	position: relative;
	width: 50px;
	height: 50px;
	background-color: cornflowerblue;
	border-radius: 100px 100px 100px 100px;

	/* Untuk Mozilla */

	animation-name: namaAnimasi;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	/* Untuk Chrome */

	-webkit-animation-name: namaAnimasi;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;

}

</style>

</head>

<body>

<div id="elemen" style="text-align:center;">X</div>

</body>
</html>

\* code contoh praktek bisa di coba dengan editor HTML online buatan saya, gratis! =) <a href='http://www.ronaldhutasuhut.com/wepro/WePro.html'>http://www.ronaldhutasuhut.com/wepro/WePro.html</a>

Selamat bereksperimen!