Transition & Animation Dasar CSS adalah dua fitur penting yang membuat tampilan website terasa halus, interaktif, dan modern.
Halo teman-teman, di era web modern seperti sekarang, efek gerak yang lembut bukan lagi sekadar hiasan, tetapi juga membantu pengalaman pengguna saat berinteraksi dengan elemen di halaman. Pada artikel ini kodelyly.com akan membahas bagaimana cara kerja transition dan animation dasar di CSS, serta contoh sederhana yang bisa langsung kalian coba.
Transition & Animation Dasar CSS
Pada dasarnya, transition dan animation di CSS sama-sama mengubah nilai properti secara bertahap dari satu kondisi ke kondisi lain. Bedanya, transition butuh pemicu seperti hover atau klik, sedangkan animation bisa berjalan otomatis tanpa interaksi pengguna.
Apa Itu CSS Transition
CSS transition digunakan untuk memberikan efek perpindahan halus saat suatu properti berubah. Misalnya saat warna tombol berubah ketika kursor diarahkan ke atasnya. Properti utama yang sering dipakai adalah transition-property, transition-duration, transition-timing-function, dan transition-delay.
Contoh sederhana:
.button {
background-color: #6c5ce7;
color: #fff;
padding: 10px 20px;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #341f97;
}
Dengan transition, perubahan warna terasa lembut, tidak langsung “lompat” dari satu warna ke warna lain.
Apa Itu CSS Animation
CSS animation lebih fleksibel karena menggunakan keyframes. Kalian bisa mengatur banyak tahap animasi sekaligus, misalnya memindahkan posisi, mengubah ukuran, sampai memutar elemen berkali-kali. Properti pentingnya antara lain animation-name, animation-duration, animation-iteration-count, dan animation-direction.
Contoh sederhana:
.box {
width: 50px;
height: 50px;
background: #fd79a8;
animation: gerakKotak 2s infinite alternate;
}
@keyframes gerakKotak {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
Pada contoh ini, kotak akan bergerak maju mundur secara terus-menerus karena menggunakan nilai infinite dan alternate.
Perbedaan Transition Dan Animation
Berikut perbedaan singkat transition dan animation dasar CSS:
| Fitur | Transition | Animation |
|---|---|---|
| Pemicu | Butuh event seperti hover atau klik | Bisa otomatis tanpa interaksi |
| Pengaturan | Biasanya satu perubahan utama | Bisa banyak tahap melalui keyframes |
| Kegunaan | Efek halus pada perubahan sederhana | Efek gerak kompleks dan berulang |
Dengan memahami perbedaan ini, kalian bisa memilih teknik yang paling tepat sesuai kebutuhan desain.
Contoh Penggunaan Di UI
Pada tombol, transition cocok untuk efek hover warna dan bayangan sehingga terasa lebih responsif. Sedangkan animation bisa dipakai untuk membuat loading spinner, banner berjalan, atau ikon yang berdenyut agar menarik perhatian pengguna.
Jika digabung dengan desain yang konsisten, penggunaan transition & animation dasar CSS yang tepat juga dapat meningkatkan nilai SEO secara tidak langsung, karena pengalaman pengguna menjadi lebih nyaman dan pengunjung betah berlama-lama di website kalian.
Baca Juga:
Box Shadow & Text Shadow di CSS
Kesimpulan
Transition & Animation Dasar CSS adalah kunci untuk menciptakan efek gerak yang halus dan menarik pada elemen web. Transition cocok untuk perubahan sederhana yang dipicu interaksi, sementara animation digunakan untuk efek yang lebih kompleks dan dapat berjalan otomatis. Dengan memanfaatkan keduanya secara bijak, tampilan website kalian akan terlihat lebih profesional, modern, dan menyenangkan untuk digunakan.
Sekian artikel dari kodelyly.com, semoga penjelasan tentang transition dan animation dasar CSS ini bermanfaat dan bisa langsung kalian praktikkan pada proyek web berikutnya.