Transition CSS adalah teknik dalam web desain untuk melakukan perubahan properti pada elemen web yang berlangsung selama interval waktu tertentu. Dengan kata lain, transisi membuat perubahan properti berlangsung secara bertahap, dari satu keadaan ke keadaan lain selama periode yang ditentukan (bukan terjadi seketika).

Dalam konteks yang lebih luas, transition CSS berperan dalam tipografi web. Teknik ini bisa membuat perubahan ukuran font secara terkontrol, menambahkan nuansa lebih ”canggih” pada cara teks diperkenalkan ke pembaca. Misalnya, bagian judul ukurannya semakin membesar saat audiens men-scroll halaman atau teks.

Selain memberikan kontrol visual kepada web developer, transisi juga menambahkan dinamika dan gerakan ke dalam elemen statis seperti teks. Hal ini membantu meng-highlight informasi penting sekaligus mengarahkan perhatian audiens.

Di sini, kamu akan mempelajari berbagai properti dalam transition CSS, cara menggunakan, serta pembahasan lebih detail tentang CSS hover. Yuk, simak!

Properti yang Dapat Digunakan dengan Transition

Berikut beberapa properti kunci yang bisa kamu gunakan dengan transition CSS:

Cara Menggunakan Transition CSS

Sebelum mulai menggunakan transition CSS, kamu perlu memahami sintaks dasar dalam menambahkan efek transisi pada elemen HTML. Ini adalah fondasi yang akan mengubah cara elemen web bereaksi terhadap interaksi audiens.

Berikut contohnya:

div {
  transition: [transition-property] [transition-duration] 
  [transition-timing-function] [transition-delay];
}

Selanjutnya, inilah cara untuk mengaktifkan transition CSS:

#1 Tentukan properti yang akan diubah

Pertama, tentukan properti apa yang ingin kamu beri efek transisi. Properti bisa berupa warna, lebar, tinggi, atau lainnya.

Sebagai contoh, jika kamu ingin mengubah warna background elemen saat audiens mengarahkan kursor ke atasnya, kamu akan menggunakan properti background-color.

div {
  background-color: blue;
}

#2 Tambahkan efek transisi

Selanjutnya, tambahkan sintaks transition ke elemen tersebut. Kamu perlu menentukan durasi transisi dan (jika perlu) fungsi waktu serta penundaan. Contohnya, kita akan menetapkan durasi 2 detik.

div {
  background-color: blue;
  transition: background-color 2s;
}

#3 Tetapkan perubahan saat interaksi

Terakhir, tentukan apa yang terjadi saat ada interaksi. Dalam kasus ini, kita ingin warna background berubah saat audiens melakukan hover. Kita akan menambahkan pseudoclass :hover untuk menentukan perubahan.

div:hover {
  background-color: red;
}

Dengan cara di atas, kamu telah berhasil menetapkan transisi pada elemen web. Saat audiens mengarahkan kursor ke elemen div, warna background akan berubah dari biru menjadi merah selama periode 2 detik.

Transition CSS Hover

Transition CSS hover mengacu pada penerapan efek transisi yang terjadi ketika audiens menempatkan kursor mouse di atas elemen tertentu di halaman web.

Dalam konteks transition CSS, hover adalah sebuah pseudo-class yang dipakai dalam stylesheet untuk menargetkan elemen hanya saat kursor mouse berada di atasnya. Berikut cara untuk menerapkan transition CSS hover:

Langkah 1: Tentukan elemen HTML

Tentukan elemen HTML yang ingin kamu terapkan efek hover. Elemen bisa berupa apa saja. Untuk contoh ini, kita akan menggunakan elemen div.