CSS3 Transisi

Setelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya kegaya yang lain, tanpa menggunakan animasi Flash ataupun javascripts.

Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. Berikut beberapa browser yang mendukung fitur ini :

• Internet Explorer tidak lagi mendukung properti transisi.
• Firefox 4 membutuhkan awalan-moz-.
• Chrome dan Safari membutuhkan awalan-WebKit-.
• Opera membutuhkan awalan-o-.

Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".

Dan 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.

Elemen yang menggunakan CSS3 Transisi

Berikut kode CSS3 dari contoh diatas :

<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.

<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

Efek transisi melebar kesamping sekaligus kebawah

<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

berikut hasilnya :

Efek transisi melebar kesamping sekaligus tinggi menyempit

 Berikut contoh lain :

<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#C1C7FF;
border:3px solid #aaa;
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>

Berikut hasilnya :

Efek transisi membesar dan berputar

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: CSS3 Transisi; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS3 GeneratorSebelum memasuki pembahasan tentang CSS3 Generator, saya akan menjelaskan tentang Apa itu CSS3? mungkin dari kalian ada yang belum mengetahuinya menurut info yang s ... readmore
• Cara membuat tanggal otomatis updateMasih dalam kategori css dan javascript, kali ini kita akan belajar membuat dan memasang tanggal otomatis update setiap saat yang bisa kita pasang pada web ataupun ... readmore
• Cara buat slide show CarouselMenambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show ... readmore
• Percantik Tampilan Label Cloudmu Dengan CSS Permintaan sahabat blogger dalam bentuk komentar di salah satu  postingan OOM RIO untuk meminta dibuatkan tutorialnnya. Kelebihan dari modifikasi widget ... readmore
• Thread Comments Stylish dengan CSS Modifikasi Thread Comments Blogger Dengan CSS, ini pernah saya bahas dan kali ini saya akan membagikan yang versi duanya yang lebih stylish yang kebetulan saya ... readmore