Animasi CSS

Scale berguna untuk mengubah ukuran element. Untuk menggunakan fungsi scale Fungsi scale mengubah ukuran dengan arah x dan y. Fungsi scaleX mengubah ukuran horizontal. Fungsi scaleY mengubah ukuran vertikal. Value relatif terhadap ukuran awal, jika lebih besar dari 1 maka akan diperbesar, jika lebih kecil dari 1 diperkecil. See the Pen CSS Transform Scale by … Read more

Translate atau move, fungsi yang berguna memindahkan posisi element. Untuk menggunakan fungsi translate Fungsi translate akan bergerak secara diagonal. Fungsi translateX bergerak horizontal, nilai positif bergerak ke kanan, negatif bergerak ke kiri. Fungsi translateY bergerak vertikal, nilai positif bergerak ke bawah, negatif bergerak ke atas. See the Pen CSS Transform Translate by SkillPlus (@SkillPlus) on … Read more

Setelah kita mempelajari property yang digunakan dalam Animasi CSS, mungkin Anda bertanya, property apa saja yang dapat dianimasikan? Untuk ide secara umum, property yang dapat dianimasikan adalah property berupa angka (termasuk warna adalah angka). Dimana CSS dapat melakukan perhitungan perubahan dari state awal ke state akhir. Property yang tidak dapat dianimasikan adalah property seperti font … Read more

Pada modul ini kita akan membahas mengatur transition-property lebih dari satu. Contohnya kita akan mengubah background-color dan color pada button. Caranya sangat mudah, cukup menambahkan property yang akan dianimasi pada transition-property, dengan dipisahkan tanda comma. Silakan click tab result untuk melihat hasil akhir, atau click css untuk melihat css. Atau anda juga dapat menggunakan keyword … Read more