Tutorial CSS3 ini terbagi atas dua: yang satu menggunakan properti transition, yang satu menggunakan keyframe, nah, kali ini ane akan membahas yang lebih simpel dulu, yaitu menggunakan transition

Pertama, kita membuat dulu sebuah div:

<div>Testing 1234</div>

Terus kita memberikan style pada div tersebut dan juga merubah backgroundnya ketika mouse ditaruh diatasnya:

div {
    padding:10px;
    background:darkblue;
    color:white;
    float:left;
}
div:hover {
    background:orange;
}

Nah, jika kita taruh mouse diatas div maka otomatis warnanya langsung berubah tanpa efek animasi kan? Coba liat live demonya:

Nah, mungkin kita merasa kalau efeknya kurang mantap gitu, jadi kita akan memasukkan animasi perubahan warna ketika mouse ditaruh diatas div

Sudah mantap kan, karena sudah ada animasinya, sekarang ane akan menjelaskan kode CSS yang membuat hal itu terjadi, kode itu adalah -webkit-transition:all 0.2s linear; dan -moz-transition:all 0.2s linear;

Mari kita menginspeksi kodenya:

-webkit- dan -moz- adalah prefiks, kali ini ane tidak akan menjelaskan maksud dari prefiks

transition adalah properti untuk memberikan efek transisi

all 0.2s linear sebenarnya merupakan shorthand dari beberapa properti, yang pertama (all) adalah menentukan properti apa yang dianimasikan, jadi kita bisa menganimasikan perubahan lebarnya saja tapi tingginya tidak, dll. 0.2s artinya transisinya berlangsung selama 0.2 detik dan linear berfungsi agar kecepatan animasinya tetap (karena animasinya bisa dibuat agak cepat diawal tapi lambat diakhir misalnya). Sebenarnya setelah linear kita juga bisa masukkan delay (tidak ada dalam kode) agar kita harus menunggu beberapa detik sebelum animasi terjadi

Kita bisa menganimasikan semua properti yang ada

Sekian dari ane, semoga bermanfaat :D