Belajar Mengenal CSS Transition

CSS-Tags . Hari Kita akan belajar dan mengenal penggunaan CSS Transition,banyak yang bisa kita lakukan dengan CSS Transition ini. namun sekarang kita akan belajar teknik dasarnya dulu,sebelum melangkah ke tingkat lanjut. Teknik ini sebelumnya sudah di jelaskan di www.w3schools.com.jika ada yang belum jelas maka kesempatan ini saya akan menerangkan dalam bahasa indonesia.silahkan baca tutorialnya dengan seksama.

CSS TRANSITION

Dengan CSS3 kita bisa mengunakan berbagai efek dengan satu style ke style lain tanpa harus ada pengunakan efek animasi dengan javascript atau flash.
hanya dengan mengarahkan mouse maka efek tersebut akan bekerja.perlu di ingatkan kembali. CSS3 Hanya akan bekerja pada Browser yang mendukung. seperti Firefox,Google Chrome,Safari dan Opera, namun Untuk IE masih belum ada dukungan,semoga browser tersebut bisa menyaingi browser lainnya.
contoh penggunaan pada browser :

• Firefox  membutuhkan awalan -moz-.
• Chrome dan Safari membutuhkan awalan -webkit-.
• Opera membutuhkan awalan -o-.

CONTOH :

Arahkan Mouse Pada Kotak di Bawah:

CSS3
Transition

Bagaimana cara kerjanya?

CSS3 transisi efek yang memungkinkan elemen secara bertahap berubah dari satu gaya ke gaya yang lain.
Untuk melakukan ini, Anda harus menentukan dua hal:

• Tentukan properti CSS untuk menambahkan efek.
• Tentukan durasi efek.

div
{
transition: width 2s;
-moz-transition: width 2s; /* untuk Firefox 4 */
-webkit-transition: width 2s; /* untuk Safari dan Chrome */
-o-transition: width 2s; /* untuk Opera */
} 

Catatan: Jika durasi tidak ditentukan, maka transisi tidak akan berpengaruh, karena nilai default adalah 0.

Efeknya akan dimulai ketika CSS properti tertentu ada perubahan nilai. Perubahan CSS properti akan bekerja jika ada pengarahan mouse pada elemen:

div:hover
{
width:300px;
}

contoh:

Arahakan mouse

Catatan: Jika pengarahan mouse keluar dari elemen tersebut maka efek akan kembali ke posisi semula.

Beberapa Perubahan

Untuk menambahkan efek transisi agar lebih dari satu gaya,maka nada harus menambahkan properti lebih, dipisahkan dengan koma:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

contoh:

Arahakan mouse

transisi Properti

Tabel berikut berisi daftar semua properti transisi:

Property	Description	CSS
transition	Sebuah properti singkat untuk menetapkan sifat transisi empat ke sebuah properti tunggal	3
transition-property	Menentukan nama properti CSS untuk transisi yang diterapkan	3
transition-duration	Mendefinisikan lamanya transisi yang diperlukan. default 0	3
transition-timing-function	Menjelaskan bagaimana kecepatan selama transisi akan dihitung. Default "ease"	3
transition-delay	Mendefinisikan ketika transisi akan mulai. default 0	3

Dua contoh Set CSS di bawah semua menggunakan properti transisi:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
} 

contoh:

Catatan : Tunggu setidaknya sampai 2detik agar efek bekerja.

Atau menggunakan css seperti di bawah;
Efek transisi sama seperti di atas hanya mengunakan penyingkatan properti.

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
} 

Semoga Artikel belajar CSS Transition ini bisa bermanfaat bagi kita semua yang sedang belajar CSS,dan perlu di ingat kita akan belajar dari tahap dasar sampai tahap profesional. terima kasih atas kunjungannya.

Reference