Halo teman-teman semuanya, setelah sebelumnya kita mempelajari tentang z-index dan cara mengatur layering, sekarang kita akan belajar bagaimana membuat elemen di halaman kita menjadi lebih hidup dan interaktif menggunakan CSS Transition dan CSS Animation.
Dengan fitur ini, kita bisa membuat efek seperti perubahan warna yang halus saat hover, elemen yang muncul perlahan, bahkan pergerakan animasi penuh — semua tanpa bantuan JavaScript!
1. Apa Itu Transition?
Transition memungkinkan kita menambahkan efek animasi saat nilai properti CSS berubah, misalnya saat elemen di-hover.
-
Contoh sederhana:
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}
Penjelasan: Warna latar akan berubah dari biru ke merah secara halus dalam waktu 0.3 detik.
-
Properti Transition:
| Properti |
Fungsi |
transition-property |
Properti yang akan dianimasikan |
transition-duration |
Durasi transisi (contoh: 0.5s) |
transition-timing-function |
Kecepatan efek (linear, ease, dsb.) |
transition-delay |
Jeda sebelum animasi dimulai |
2. Apa Itu Animation?
Animation memungkinkan kita membuat gerakan atau perubahan yang lebih kompleks dan berulang, menggunakan @keyframes.
-
Contoh Sederhana:
@keyframes gerak {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
.box {
animation: gerak 2s ease-in-out infinite;
}
Penjelasan: Elemen .box akan bergerak ke kanan sejauh 200px secara terus-menerus.
-
Properti Animation:
| Properti |
Fungsi |
animation-name |
Nama animasi (@keyframes) yang dipanggil |
animation-duration |
Lama waktu animasi berjalan |
animation-timing-function |
Pola kecepatan transisi (ease, linear, dll) |
animation-delay |
Waktu tunggu sebelum animasi dimulai |
animation-iteration-count |
Jumlah pengulangan (atau infinite) |
animation-direction |
Arah animasi (normal, reverse, alternate) |
Perbedaan Transition vs Animation
| Fitur |
Transition |
Animation |
| Butuh trigger? |
Ya (misalnya :hover) |
Tidak selalu (bisa otomatis berjalan) |
| Bisa kompleks? |
Terbatas |
Sangat fleksibel (pakai @keyframes) |
| Ulangi otomatis? |
Tidak |
Bisa (infinite) |
Contoh Lengkap
Contoh berikut menampilkan efek hover menggunakan transition, dan gerakan animasi loop menggunakan @keyframes.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Transition & Animation Dasar</title>
<style>
.button {
background-color: royalblue;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: crimson;
}
.box {
width: 100px;
height: 100px;
background-color: teal;
margin-top: 40px;
animation: goyang 1s ease-in-out infinite alternate;
}
@keyframes goyang {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<h1>Contoh Transition & Animation</h1>
<button class="button">Hover Saya</button>
<div class="box"></div>
</body>
</html>
Tombol akan berubah warna secara halus saat di-hover berkat transition. Kotak di bawahnya akan terus berputar ke kiri dan kanan menggunakan animasi @keyframes bernama goyang, yang berjalan terus-menerus.
Kesimpulan
Transition dan animation memberikan sentuhan interaktif dan dinamis pada halaman web. Gunakan transition untuk efek perubahan yang halus seperti hover atau focus.
Gunakan animation untuk efek kompleks dan berulang seperti loading spinner, hero intro, atau motion UI.
Terima Kasih