CSS Trick : Membuat Efek Transisi dengan CSS

Membuat efek transisi bisa dilakukan dengan menggunakan CSS, tanpa harus menggunakan javascript ataupun library jQuery. Cara sederhana yang dapat dilakukan adalah dengan menggunakan kode “transition”. Contoh penggunaan efek transisi dapat dilihat pada Tombol dan Kotakhijau berikut ini.

Animasi Kotak Hijau

Semua transisi di atas hanya bisa berjalan di browser Safari, Firefox, Opera dan Chrome, dan tidak akan bisa digunakan di Internet Explorer. Berikut ini source code dari efek-efek transisi di atas.

<style type="text/css">
.tautan { margin-bottom:14px;}
.tautan a {
	padding: 10px; background-color:#CCC; color:#666;
}
.tautan a:hover {
	background-color:#666; color:#FFF;
	-moz-transition: background 0.25s ease-in-out; /*-moz untuk firefox 4*/
	-o-transition : background 0.25s ease-in-out; /*-o untuk opera*/
	-webkit-transition: background 0.25s ease-in-out; /*-webkit untuk chrome dan safari*/
	transition: background 0.25s ease-in-out;
}
.kotakhijau {  
	width:100px;
	height:100px;
	padding:3px;
	text-align:center;
	color:white;
	background:green;
	transition:width 5s, height 5s;
	-moz-transition:width 5s, height 5s, -moz-transform 2s; 
	-webkit-transition:width 5s, height 5s, -webkit-transform 2s; 
	-o-transition:width 5s, height 5s, -o-transform 2s; 
}
.kotakhijau:hover {
	width:200px;
	height:200px;
	padding 10px;
	transform:rotate(270deg);
	-moz-transform:rotate(270deg); 
	-webkit-transform:rotate(270deg); 
	-o-transform:rotate(270deg);
}
</style>
<div class="tautan"> <a href="#">TOMBOL</a> </div>
<div class="kotakhijau">Animasi Kotak Hijau</div>

Gampang bukan, tanpa menggunakan script javascript kita bisa mengembangkan animasi dan transisi objek dengan hanya menggunakan CSS.
Sumber : http://www.w3schools.com/css3/css3_transitions.asp
Isaninside – Yogyakarta November 2011

Share :
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks
  • Google Buzz
  • RSS
  • Technorati
  • Add to favorites
  • email
  • MySpace
  • Plurk

Leave a Reply

3 thoughts on “CSS Trick : Membuat Efek Transisi dengan CSS”

  1. kebetulan saya baru menggandrungi web, tapi blm masuk materi css, stelah saya jalan jalan di blogblog dan lainnya, saya tertarik dg css, karna saya skrg baru belajar php dan web pun msh menggunakan tabel yg kaku, mungkin saya bakal bawel nih bang isan, hehee maklum newbee,
    posting css yg lainnya dong, klo menubar nya biar ada background color nya gmna mas cara inputnya (perintahnya)
    trs pinggirannya berbayang hitamsdikit seperti punya abang isan, minta kodingnya bang ya :D

    postingan ini bermanfaat, makasih bang isan.