TRANSISI CSS

Transisi CSS memungkinkan perubahan properti elemen HTML berlangsung selama periode waktu tertentu. Dengan kata lain, transisi CSS memberikan efek animasi, seperti perubahan mulus dari satu gaya ke gaya lainnya tanpa menggunakan Javascript atau Flash.

Properti Transisi CSS

Transisi CSS memiliki empat properti utama:

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

transition-property

Properti ini menentukan nama properti CSS yang transisinya ingin diatur. Kamu bisa menyetel lebih dari satu properti dengan menggunakan koma.

div {
  transition-property: background-color;
}

Dalam contoh ini, latar belakang elemen div akan bertransisi.

transition-duration

Properti ini menentukan durasi transisi. Nilainya bisa dalam detik (s) atau milidetik (ms).

div {
  transition-duration: 2s;
}

Dalam contoh ini, transisi akan berlangsung selama dua detik.

transition-timing-function

Properti ini menentukan kecepatan transisi. Nilainya bisa adalah linear, ease, ease-in, ease-out, dan ease-in-out.

div {
  transition-timing-function: ease-in;
}

Dalam contoh ini, transisi akan dimulai secara perlahan dan kemudian mempercepat.

transition-delay

Properti ini menentukan ketika transisi akan dimulai. Nilainya bisa dalam detik (s) atau milidetik (ms).

div {
  transition-delay: 1s;
}

Dalam contoh ini, transisi akan dimulai satu detik setelah mendapatkan trigger.

Shorthand Transisi CSS

Kamu juga bisa menapikan semua keempat properti transisi CSS secara langsung dalam satu baris kode dengan properti transition.

div {
  transition: background-color 2s ease-in 1s;
}

Ini akan memiliki efek yang sama dengan contoh kode sebelumnya.

Dengan menggunakan transisi CSS, kamu bisa menciptakan pengalaman pengguna yang lebih kaya dan interaktif pada situs webmu.