[CSS] Dengan fungsi Transition buat web anda tampak lebih keren

Transition adalah sebuah fungsi cssyang bisa bikin web kamu keren. karena fungsi ini dapat membuat pergantiannya perlahan. alah ngomong apa. untuk lebih jelasnya langsung aja coba dihover kotak dibawah ini\

oiya, catatan untuk IE mohon maaf belum bisa support walaupun IE win 8 sekalipun
untuk fungsi transition dibagi menjadi 4 yaitu durasi, properti dan timming function, delay.
Untuk delay adalah jeda antara hover(misal) dengan action nya.
untuk durasi adalah seberapa lama akan kotak ini akan berubah
untuk yang properti ini adalah apa saja yang akan dibuat lamban misalkan width (lebar) ataupun tinggi (height)
nah, untuk yang timming function dibagi beberapa macam sebagai berikut
linear: efek transisinya datar dari awal sampai akhir.
ease: efek transisinya awalnya lamban kemudian cepat terus lambat lagi di akhir valuenya (0,0,1,1)
ease-in: efeknya lamban diawalnya saja valuenya (0.25,0.1,0.25,1)
ease-out: efeknya lamban diakhirnya saja valuenya (0.42,0,1,1)
ease-in-out: lamban dia awal dan akhir valuenya  (0.42,0,0.58,1)
cubic-bezier(n,n,n,n): menentukan sendiri nilai kelambanannya nilainya berkisar dari 0-1.
scripnya kurang lebih seperti ini.

untuk syntax keseluruhannya seperti ini

transition: property duration timing-function delay;


Untuk contoh scriptnya kurang lebh seperti ini.

div
{
width:100px;
height:100px;
background:red;
transition-property: width;
transition-duration: 2s;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>

<div></div>