Using Transition Property, Transition Delay, Transition Duration, Transition Timing Function in Mozilla, Opera, Safari

Standart penulisan kode CSS3 yang hingga saat ini masih belum terwujudkan, membuat sebuah desain HTML menjadi begitu banyak memerlukan kode yang sebenarnya berfungsi sama. Satu hal yang sebenarnya dapat dimaklumi juga karena dukungan browser terhadap CSS3, terutama CSS3 animaton, transition, transformation, border-radius dan box shadow masih belum dapat direalisasikan secara maksimal. Kondisi ini masih diperparah dengan tingkat kompabilitas dimasing masing browser. Seperti di Opera misalnya. Penulisan CSS3 transition dalam bentuk :
-o-transition: all 2s ease-in 700ms
akan mampu membentuk sebuah fungsi secara sempurna, termasuk perubahan yang diharapkan pada border (border-width, border-color, border-style). Hal yang berbeda akan terjadi ketika penulisan kode dibuat dalam bentuk :
-o-transition: border 2s ease-in 700ms
. Dengan cara ini maka bentuk transisi yang diterjadi tak akan sesuai dengan bentuk yang diharapkan. Pada transisi yang lebih kompleks, dengan melibatkan beberapa transition-propery, transition, delay, transition-timing-function dan transition duration (multiple transition), bahkan justru akan merusak desain yang coba kita tampilkan. Untuk mengatasi permasalahan-permasalan seperti ini, alngkah baiknya apabila kita memahami terlebih dahulu cara penggunaan setiap kode transisi serta seberapa dukungan browser terhadapnya.

Untuk lebih memahami beberapa cara penulisan CSS3 transition, silahkan gunakan metode penulisan seperti di bawah ini :

Opera

Penulisan kode berbeda tetapi fungsinya sama

Cara penulisan kode-1
-o-transition-property: width, height, background-color, color, opacity, -o-transform;
-o-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-o-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-o-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2
-o-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background-color 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -o-transform 2s linear 2s;

Mozilla

Penulisan kode berbeda tetapi fungsinya sama

Cara penulisan kode-1
-moz-transition-property: width, height, background, color, opacity, -moz-transform;
-moz-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-moz-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-moz-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2
-moz-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -moz-transform 2s linear 2s;

Safari-Google Chrome

Penulisan kode berbeda tetapi fungsinya sama

Cara penulisan kode-1
-webkit-transition-property: width, height, background, color, opacity, -webkit-transform;
-webkit-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-webkit-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-webkit-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2
-webkit-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -webkit-transform 2s linear 2s;

Cara paling sederhana menuliskan kode transisi

Tanpa menyebutkan transition property dan timing function:

-o-transition: 1s 700ms;
-moz-transition: 1s 700ms;
-webkit-transition: 1s 700ms;

Transisi berlaku untuk semua property:

-o-transition: all 0.5s ease-in 0.8s;
-moz-transition: all 0.5s ease-in 0.8s;
-webkit-transition: all 0.5s ease-in 0.8s;

Transisi berlaku untuk semua property tanpa delay:

-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;

Catatan - Khusus Opera

• Untuk sementara ini penulisan property border dan border-radius sebaiknya tidak dilakukan di Opera (CSS3 Transition-property), karena justru merusak desain yang telah dirancang.
• Background property ditulis sebagai: background-color.
  contoh:
  -o-transition: background-color 2s ease-out 400ms;

DEMO berikut Kode CSS dan xHTML

Beberapa bentuk transisi dengan memanfaatkan seluruh komponen dan property di CSS3 transition seperti transition-delay, transition-timing-function, transition-property dan transition-duraton telah aku siapkan dalam bentuk demo beserta kode CSS dan xHTMl-nya. Silahkan buka link di bawah ini untuk melihat dan copy kodenya:

D E M O

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «