Series Mahir CSS #15 : CSS Transition

Hai, kembali lagi! Kali ini kita akan belajar tentang CSS Transitions, yaitu cara memberi efek transisi halus saat elemen-elemen di halaman berubah. Transisi memungkinkan kamu untuk mengubah properti CSS secara bertahap, membuat perubahan tampak lebih lembut dan dinamis. Ini sangat berguna untuk memberikan pengalaman pengguna yang lebih menarik tanpa harus menambahkan JavaScript atau animasi yang rumit.

Apa Itu Transisi CSS?

Transisi CSS adalah cara untuk mengatur perubahan antara dua keadaan elemen dengan efek yang halus. Misalnya, ketika kita mengubah warna latar belakang elemen saat di-hover, kita bisa membuat perubahan warna tersebut berlangsung secara gradual, bukan langsung berubah begitu saja.

Properti Dasar CSS Transition

Untuk menggunakan transisi, ada beberapa properti dasar yang perlu kamu ketahui:

1. transition-property
   Menentukan properti CSS mana yang akan diberi efek transisi. Kamu bisa memilih satu atau beberapa properti yang ingin berubah.

2. transition-duration
   Menentukan berapa lama perubahan transisi akan berlangsung. Nilainya menggunakan satuan waktu, seperti s (detik) atau ms (milidetik).

3. transition-timing-function
   Mengatur jenis kecepatan transisi. Misalnya, apakah perubahan berlangsung dengan kecepatan tetap (linear), dimulai cepat kemudian melambat (ease), atau sebaliknya.

4. transition-delay
   Menentukan waktu penundaan sebelum transisi dimulai setelah perubahan properti terjadi.

Sintaks Dasar Transisi

Berikut adalah contoh penggunaan transisi CSS yang sederhana:

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}

.box:hover {
    background-color: red;
}

Pada contoh di atas:

• transition mengatur transisi untuk properti background-color selama 0.5 detik, dengan kecepatan perubahan ease-in-out.
• Ketika elemen dengan kelas .box di-hover, warna latar belakang akan berubah dari biru ke merah dengan transisi yang halus.

Menggunakan Semua Properti Transisi

Kamu juga bisa mengatur semua properti transisi dalam satu baris kode, seperti ini:

.element {
    transition: all 0.3s ease-out;
}

Dengan all, semua properti yang berubah (seperti ukuran, warna, posisi, dll.) akan memiliki transisi dengan durasi 0.3 detik dan kecepatan ease-out.

Menggunakan Beberapa Transisi Sekaligus

Terkadang kamu ingin memberikan transisi pada lebih dari satu properti. Itu sangat mudah dilakukan! Kamu hanya perlu memisahkan properti-properti yang ingin diberi transisi dengan koma.

Contoh:

.button {
    width: 100px;
    height: 40px;
    background-color: green;
    border-radius: 5px;
    transition: background-color 0.4s ease, width 0.6s ease-out;
}

.button:hover {
    background-color: yellow;
    width: 150px;
}

Di sini, ketika elemen dengan kelas .button di-hover:

• background-color akan berubah dalam 0.4 detik.
• width akan berubah dalam 0.6 detik dan menggunakan efek ease-out.

Contoh Lain: Hover dengan Transformasi

Transisi juga bisa digunakan dengan transformasi seperti scale(), rotate(), dan lainnya.

Contoh:

.card {
    width: 200px;
    height: 300px;
    background-color: gray;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.1); /* Membesarkan elemen saat di-hover */
}

Pada contoh ini, saat .card di-hover, elemen akan membesar 10% dengan transisi yang halus.

Penundaan Transisi

Jika kamu ingin menunda transisi dimulai, kamu bisa menggunakan properti transition-delay. Misalnya, jika kamu ingin transisi dimulai setelah beberapa detik, kamu bisa menambahkan delay seperti berikut:

.box {
    width: 100px;
    height: 100px;
    background-color: purple;
    transition: background-color 0.5s ease 1s; /* Delay 1 detik */
}

.box:hover {
    background-color: orange;
}

Di sini, saat elemen di-hover, warna latar belakang baru akan berubah setelah 1 detik dengan durasi transisi 0.5 detik.

Kombinasi Transisi dan Hover Effects

Transisi sangat cocok dipadukan dengan efek hover untuk memberikan interaksi yang menarik bagi pengguna. Misalnya, kamu bisa mengubah warna latar belakang, ukuran, atau bahkan menambahkan bayangan (shadow) saat elemen di-hover.

Contoh:

.card {
    width: 250px;
    height: 350px;
    background-color: lightgray;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Menambahkan bayangan */
}

Di sini, saat hover:

• transform akan membuat elemen sedikit membesar.
• box-shadow akan menambahkan bayangan di sekitar elemen.

Kesimpulan

CSS Transitions memungkinkan kamu untuk memberikan efek perubahan yang halus pada elemen-elemen di halaman web. Dengan menggunakan properti seperti transition-property, transition-duration, dan transition-timing-function, kamu bisa membuat interaksi yang lebih menarik dan dinamis tanpa menambahkan kode JavaScript yang rumit.

Sekianlah belajar tentang CSS Transitions. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Semoga kamu bisa menambahkan efek transisi yang keren di web kamu! ?