MENGGUNAKAN TRANSISI DAN ANIMASI DI CSS?

Penggunaan transisi dan animasi di CSS memungkinkan halaman website dapat menarik dan dinamis. Teknik ini bisa memberikan meningkatkan pengalaman pengguna saat mengunjungi website yang kamu buat.

Meskipun kedua teknik ini terlihat serupa, transisi dan animasi memiliki perbedaan pada cara kerjanya. Pada artikel ini, kita akan membahas perbedaan transisi dan animasi, serta kapan sebaiknya menggunakan kedua cara tersebut di CSS.

Apa Itu CSS Transisi?

CSS Transisi adalah teknik untuk memberikan efek perubahan pada elemen secara bertahap jika terdapat interaksi yang dilakukan pengguna dalam jangka waktu tertentu. Hasilnya adalah perubahan efek element yang halus, bukan perubahan secara spontan.

Properti CSS Transisi

Untuk menggunakan transisi, kamu perlu menuliskan properti transition yang terdiri dari beberapa sub, antara lain:

• transition-property : Untuk menentukan nama properti yang akan mengalami perubahan
• transition-duration : Untuk mengatur waktu transisi berjalan
• transition-timing-function : Untuk menentukan pola percepatan transisi, seperti linier, ease, dan lain-lain.
• transition-delay : Untuk mengatur waktu tunggu sebelum transisi berlangsung

Contoh Penggunaan:

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

.button:hover { 
background-color: blue; 
}

Penjelasan Kode:
Kode di atas, element dengn kelas .button akan mengalami perubahan warna latar belakang menjadi biru secara halus dengan waktu 0.3 detik saat pengguna mengarahkan kursor ke tombol.

Kamu bisa mencoba contoh di atas melalui CodePen ini.

Kapan Menggunakan CSS Transisi

1. Perubahan Sederhana
   Transisi CSS cocok digunakan untuk perubahan elemen yang sederhana saja, misalnya perubahan warna, posisi dan ukuran ketika ada interaksi dari pengguna dengan elemen. Contohnya interaksi pengguna saat mengarahkan kursor ke tombol akan terjadi perubahan warna seperti contoh di atas.

2. Tidak Membutuhkan @keyframes
   Kamu bisa menggunakan CSS Transisi jika efek yang digunakan tidak membutuhkan perulangan yang kompleks. Karena dalam transisi, hanya ada dua nilai keadaan saja, awal dan perubahan yang tidak membutuhkan @keyframes untuk perubahan yang rinci.

Apa Itu CSS Animasi?

CSS animasi adalah teknik perubahan yang lebih kompleks menggunakan @keyframes. Teknik animasi ini dapat memberikan perubahan pada beberapa langkah dengan durasi yang panjang.

Penggunaan @keyframes ini untuk menentukan beberapa tahap perubahan, yakni awal (dengan nilai 0%), langkah lanjutan (20%, 50%, seterusnya) dan akhir (100%).

Properti CSS Animasi

Untuk menggunakan animasi, kamu perlu menggunakan properti animation dan beberapa subnya: antara lain:

• animation-name : Untuk menentukan nama keyframes
• animation-duration : Untuk mengatur waktu animasi berlangsung
• animation-timing-function : Untuk menentukan pola percepatan animasi
• animation-delay : Untuk mengatur waktu tunggu elemen sebelum animasi berlangsung
• animation-interation-count : Untuk mengatur jumlah perulangan animasi
• animation-direction : Untuk menentukan arah animasi, nilainya bisa normal, reverse dan alternate.

Contoh Penggunaan:

@keyframes moveElement {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  100% {
    background-color: black;
    transform: translateX(100px);
  }
}

.element {
  background: blue;
  padding: 10px 20px;
  animation: moveElement 2s infinite;
}

Penjelasan Kode:
Contoh di atas berarti class .element akan bergerak dari posisi awal 0% ke arah kanan sejauh 100px dan berubah warna dari merah menjadi hitam. Animasi tersebut akan terus berulang tanpa berhenti atau infinite.

Kamu bisa mencoba contoh di atas melalui Codepen ini.

Kapan Menggunakan CSS Animasi?

1. Efek Animasi Kompleks Dengan menggunakan @keyframes, kamu bisa mengatur animasi yang lebih kompleks dan melibatkan banyak langkah.
2. Membutuhkan Animasi yang Berulang Gunakan animasi jika ingin element melakukan perubahan berulang kali. Misalnya, kamu ingin membuat icon loading, animasi dapat melakukan perubahan ukuran, berapa kali akan diulang, dan ukuran rotasi element.
3. Kecepatan dan Timing Animasi Lebih Rinci Animasi cocok untuk perubahan element dengan peraturan penentuan durasi dan arah perubahan secara detail.

Kesimpulan

Penggunaan transisi dan animasi pada CSS ini memang terlihat sama, namun perbedaannya sangat signifikan. Mulai dari kontrol transisi yang hanya bisa untuk dua keadaan saja, sedangkan animasi bisa melakukan perubahan yang lebih banyak dengan menggunakan keyframes. Keduanya dapat menciptakan efek perubahan yang meningkatkan daya tarik bagi website kamu. Sesuaikan dengan kebutuhan proyekmu agar memberikan kenyamanan pengguna dan tampilan website lebih optimal.

Jangan ragu untuk terus bereksperimen, sobat Skodev!