Apa Itu Property Animation Pada CSS

2 min


Pada CSS terdapat sebuah property dengan kode animation. Property animation berfungsi untuk mengubah suatu objek dengan mode animasi pada sebuah element HTML.

Value (nilai) pada property animation merupakan perwakilan dari sub-property berikut:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Yang artinya, ketika kamu menggunakan property animation, kamu bisa mengisi nilai dari animation dengan delapan daftar property di atas.

Property animation juga perlu memanggil sebuah fungsi yang harus didefinisikan terlebih dahulu dalam kode CSS.

Pemanggilan fungsi untuk property animation bisa dilakukan dengan kode @keyframes.

Untuk lebih jelasnya coba perhatikan kode di bawah ini.

Peran @keyframes pada property animation tidak hanya untuk mendefinisikan fungsi dari animation saja, melainkan sebagai penggerak objek animasi pada halaman web.


Nilai Pada Property Animation

Nila pada property animation ditentukan oleh sub-property dari animation itu sendiri. Itu artinya, property animation tidak memiliki nilai default (single value). Nilai yang terisi dalam property animation akan bekerja dengan baik apabila nilainya cocok dengan sub-property animation.

Di bawah ini adalah daftar sub-property beserta nilai yang cocok dengan property animation.

Sub-Property Value Deskripsi
animation-name ditentukan pengguna Menjalankan seleksi terhadap nama animasi yang didefinisikan pada @keyframes.
animation-duration angka dengan satuan detik. Contoh “3s” (3 detik) Memainkan animasi berdasarkan waktu dalam nilai animation-duration. Waktu ditentukan oleh value dari animation-duration.
animation-timing-function linear
ease
ease-in
ease-out
ease-in-out
step-start
step-end
steps
cubic-bezier
initial
inherit
Memainkan animasi dengan kecepatan yang sama dari awal hingga akhir.
animation-delay angka dengan satuan detik. Contoh “3s” (3 detik) Memberi waktu jeda sebelum animasi dimainkan.
animation-iteration-count integer (angka)
infinite
initial
inherit
Menentukan berapa kali animasi akan dimainkan. Animasi akan berputar berulang kali jika diisi dengan nilai infinite.
animation-direction normal
reverse
alternate
alternate-reverse
initial
inherit
Menentukan arah (direksi) animasi.
animation-fill-mode none
forwards
backwards
both
initial
inherit
Menentukan gaya pada sebuah element ketika belum berjalan (sebelum berjalan, setelah selesai berjalan, atau keduanya)
animation-play-state paused
running
initial
inherit
Melakukan kontrol pada animasi untuk dihentikan atau dijalankan melalui value pada property animation-play-state.

Dukungan Browser Property Animation

Property animation dapat berjalan dengan baik pada software peramban web berikut:

  • Google Chrome versi 43+
  • Microsoft Edge versi 10+
  • Mozilla Firefox versi 16+
  • Safari Browser versi 9+
  • Opera Browser versi 30+

Property animation tidak dapat berjalan dengan baik pada software Internet Explorer versi kurang dari 9.

4.8/5 4 ratings

What's Your Reaction?

Sebel Sebel
1
Sebel
Pusing Pusing
1
Pusing
Sedih Sedih
1
Sedih
Kocak Kocak
0
Kocak
Terkesan! Terkesan!
0
Terkesan!
Kecewa Kecewa
0
Kecewa
Zapra Gartiast

Hay! Saya Zapra Gartiast, calon Wali Kota Bandung tahun 2025 - 2035. Mohon do'a dari kalian yang membaca 😀

Berikan Komentar

avatar
  Subscribe  
Notify of
Choose A Format
Story
Formatted Text with Embeds and Visuals