CSS3 Transition


Dengan CSS3, kita dapat menambahkan efek ketika mengubah suatu objek dari satu gaya ke gaya lainnya, tanpa harus menggunakan animasi Flash ataupun Javascript.

Contoh CSS3 Transition

Contoh

div:hover
{
width:300px;
}

Coba »

Contoh Transition dengan Perubahan Beragam

Contoh

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;
}

Coba »

Contoh Transition Lainnya

Pada contoh ini, objek akan mengalami perubahan setelah 2 detik.

Contoh

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

Coba »