Contoh Property Yang Dapat Dianimasikan CSS3

Hai teman teman saya harap teman teman sudah mengikuti step by step artikel tentang transition pada CSS3 dari awal. Jadi agar tidak membingungkan ketika baca artikel kali ini. Jadi property transition secara default akan mencoba mengubah apa yang bisa dubah karena ada dua hal yang saya ubah pergerakkannya disini yakni transformnya dan margin-leftnya. Kalo kita tidak tulis propertynya itu sebenarnya yang terjadi adalah kita menuliskan all sebagai parameter pertamanya

dan hasilnya pun sama saja. Tapi teman teman juga bisa mengganti all itu menjadi property yang akan diberikan transisi. Saya akan ubah keadaan akhirnya dengan menuliskan seperti ini

Misalnya saya ingin ubah hanya pergerakkan margin-leftnya saja artinya saya menuliskan seperti berikut

maka yang akan terjadi adalah transisikan margin-leftnya dan untuk transform rotatenya ini tidak artinya boxnya akan bergeser dari kiri kekanan secara halus sedangkan perputaran rotasinya akan berubah secara instan.

Jadinya teman teman bisa lakukan satu persatu atau berikan nilai all untuk semua property yang akan diberikan transisinya. Sekarang kita akan lihat nama property apa saja yang bisa kita ubah secara halus ternyata tidak semua property bisa kita animasikan dan berikut ini contoh property yang bisa animasikan background-color, background-position, background-size, border, color, filter, font-size, line-height, margin padding, width height, opacity, transform dan letter-spacing.
tapi ada beberapa property yang memang tidak bisa dianimasikan seperti perubahan font-family atau perubahan bentuk font, display dan yang terakhir position. Oke cukup sekian dan semoga bermanfaat.