Belajar Mengenal CSS Transition

belajar 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

5 comments:

  1. wah manteb. kebetulan mau tau banyak efek dari CSS. kira-kira kalo di blog letaknya dimananya ya.. di Edit Template dibawah body atau di atas ]]>

    ReplyDelete
    Replies
    1. gunakan css di atas ]]</skin>
      kalau di bawah gunakan
      <style type="text/css"> ..... css ....</style>

      Delete
  2. Saya minta script css buat "note"nya ya mas.. ;)

    ReplyDelete
  3. Peluang Bisnis Dahsyat Yusuf Mansur. "Orang islam harus KAYA"
    dan "Beli Kembali Aset Indonesia" dengan INDONESIA BERJAMAAH
    Segera Amankan Posisi Anda, Segera JOIN bersama
    Komunitas Paytren , bisnis terbaru Ustadz Yusuf Mansur
    Dengan Produk V-pay ( Virtual Payment ) Anda akan
    dimudahkan dalam hal urusan pembayaran listrik,
    telpon, pulsa, PDAM, TV Berbayar, Internet, cukup dari genggaman anda saja . Transaksi dapat dilakukan
    melalui Website, SMS, Android, BlackBerry, iPhone dan YM dan anda mendapatkan casback disetiap transaksi anda dan mitra di jaringan anda.
    Penasaran Dengan Bisnis
    Ustd. Yusuf Mansur ini Kunjungi Website: KLIK DISINI

    ReplyDelete
  4. Peluang Bisnis Dahsyat Yusuf Mansur. "Orang islam harus KAYA"
    dan "Beli Kembali Aset Indonesia" dengan INDONESIA BERJAMAAH
    Segera Amankan Posisi Anda, Segera JOIN bersama
    Komunitas Paytren , bisnis terbaru Ustadz Yusuf Mansur
    Dengan Produk V-pay ( Virtual Payment ) Anda akan
    dimudahkan dalam hal urusan pembayaran listrik,
    telpon, pulsa, PDAM, TV Berbayar, Internet, cukup dari genggaman anda saja . Transaksi dapat dilakukan
    melalui Website, SMS, Android, BlackBerry, iPhone dan YM dan anda mendapatkan casback disetiap transaksi anda dan mitra di jaringan anda.
    Penasaran Dengan Bisnis
    Ustd. Yusuf Mansur ini Kunjungi Website: http://suksespaytren.com/wan-vsi

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top