CSS3 Transisi

Dengan CSS3 Transisi , kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya ke gaya yang lain tanpa menggunakan animasi Flash ataupun JavaScript.
Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. 

Berikut beberapa browser yang mendukung fitur ini :
1. Internet Explorer tidak lagi mendukung properti transisi.
2. Firefox 4 membutuhkan awalan -moz-.
3. Chrome dan Safari membutuhkan awalan -WebKit-.
4. Opera membutuhkan awalan -o-.

Ada 2 hal yang harus kita perhatikan agar CSS3 Transisi ini dapat bekerja dengan baik yaitu :
1. Kita harus menentukan Properti CSS.
2. Menentukan durasi efek.
Jika nilai durasi tidak ditentukan maka efek transisi ini tidak akan bekerja karena nilainya masih default yaitu "0".

Cara kerjanya kita menggunakan fitur mouse-over , yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat , dan ketika pointer mouse keluar dari atas elemen , maka bentuk elemen kembali seperti semula.

Silahkan anda arahkan pointer mouse anda pada kotak-kotak yang ada dibawah ini.

Contoh 1

Elemen yang menggunakan CSS3 Transisi
Kode :
<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi:hover
{
width:300px;
}
</style>
<div class="transisi">Elemen yang menggunakan CSS3 Transisi</div>

Contoh 2
Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya , misalnya efek transisi ke samping sekaligus ke bawah.

Efek transisi melebar kesamping sekaligus kebawah
Kode :


<style type="text/css">div.transisi2{width:100px;height:100px;background-color:#e0e0e0;border:3px solid #3b5998;padding:10px;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div.transisi2:hover{width:300px;height:300px;}</style><div class="transisi2">Efek transisi melebar kesamping  sekaligus kebawah</div>



Contoh 3


Efek transisi melebar kesamping sekaligus tinggi menyempit

Kode :
<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi3:hover
{
width:300px;
height:40px;
}
</style>
<div class="transisi3">Efek transisi melebar kesamping  sekaligus tinggi menyempit</div>

Contoh 4

Efek transisi membesar dan berputar
Kode :
<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}
div.transisi4:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
}
</style>
<div class="transisi4">Efek transisi membesar dan  berputar</div>

Semoga bermanfaat...!!!


Subscribe

1 Komentar Blogger
Komentar Facebook

1 komentar:

July 19, 2013 at 5:57 PM

wah hatur nuhun kang decun :) , salam blogger ti bandung ..

ameng nyak ka blog abdi ..

http://rian-nurherdian.blogspot.com

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge