Animasi dengan CSS

Beberapa tahun lalu, jika ingin membuat sebuah animasi sederhana di website, seperti objek bergerak dari kiri ke kanan, maka kita harus membuatnya menggunakan Flash, yang dibuat frame-by-frame. Agak ribet ya.

Namun saat ini semua sudah lebih simple, kita bisa membuat animasi dengan CSS3.

Bagimana membuat nya? Pada tulisan ini wakaka mencontohkan animasi sederhana yang bisa kita buat menggunakan CSS, tentunya ini hanya dasar-dasar, anda bisa membuat yang lebih wah dari ini nantinya. Ingat ini hanya basic untuk pemula.

Membuat Struktur HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		<!-- Code CSS diletakan disini -->
	</style>
</head>
<body>
	<div class="box">
		<div class="ball"></div>
	</div>
</body>
</html>

Code CSS
CSS ini diletakkan diantara tag <pre><style> dan </style></pre>

		.box{
			margin:30px auto;
			background:#fff000;
			width:400px;
			height:200px;
			position:relative;
			box-shadow: 0px 0px 10px #888;
			-moz-box-shadow: 0px 0px 10px #888;
			-webkit-box-shadow: 0px 0px 10px #888;

		}
		.ball{
			width:50px;
			height:50px;
			position:absolute;
			background-color:#b00;
			margin:0;
			padding:0;
			bottom:0;
			display:block;
			border-radius:50%;
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			
			-moz-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
			-webkit-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
			transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
		}
		.box:hover .ball{
			border-radius:0;
			-webkit-border-radius:0;
			border-radius:0;
			width:100px;
			height:100px;
			transform: translate(300px,0);
			-moz-transform: translate(300px,0);
			-webkit-transform: translate(300px,0);
		}

Oke, hanya sesederhana itu? YA, hasil yang kita dapat adalah seperti demo dibawah ini

DEMO

Penjelasan:
Yang perlu kamu perhatikan hanya pada bagian

-moz-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
-webkit-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;

Disitu kita menentukan, apabila mouse berada diatas kotak warna kuning, maka akan terjadi transisi, yang durasinya width:2 detik, height 2 detik, -moz-transform 2 detik, dan -moz-border-radius 1 detik.

Transisi seperti apa yang akan terjadi?
Semua ditentukan dibagian box:hover

-moz-border-radius:0;
width:100px;
height:100px;
-moz-transform: translate(300px,0);

Yaitu:
Border radius yang tadinya 50% (berbentuk bulat) akan berubah menjadi 0 (bentuk kotak).
Width & Height yang tadinya 50px akan berubah menjadi 100px, dalam waktu 2 detik.
Posisi akan di transformasi sesuai sumbu x menjadi 300px.

Baiklah Sekian tulisan kali ini, selamat berkreasi sahabat Wakaka Design :D





Penulis :

I'm just simple person, web developer part time, web design holic, website researcher. Work in the world of websites & coding for eat : View all posts by Abuser

Comments

One thought on “Animasi dengan CSS

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development