Home » CSS » 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

Tentang Isaninside - Muhammad Ihsan Zul

Isaninside - Muhammad Ihsan Zul, Seorang suami dari Rizka Irma Septiani dan bekerja sabagai Dosen di Politeknik Caltex Riau (PCR). Lulusan Pendidikan Teknik Elektronika FT UNP [Padang] tahun 2009 dan menyelesaikan pendidikan Pasca Sarjana di UGM tahun 2012. Ilmu untuk dibagi bukan dipamerkan. Let's Share!
Bookmark and Share Subscribe

3 Responses to “CSS Trick : Membuat Efek Transisi dengan CSS”

  1. opah 29/12/2012

    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.

    Reply
  2. Nice article, keep writing…

    Reply
  3. Makasih banyak men..

    Reply

Tinggalkan komentar