- 1. Apa Itu Transition?
- 2. Apa Itu Animation?
- Perbedaan Transition vs Animation
- Contoh Lengkap
- Kesimpulan
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-propertyProperti yang akan dianimasikan transition-durationDurasi transisi (contoh: 0.5s)transition-timing-functionKecepatan efek (linear, ease, dsb.) transition-delayJeda 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
.boxakan bergerak ke kanan sejauh 200px secara terus-menerus. -
Properti Animation:
Properti Fungsi animation-nameNama animasi ( @keyframes) yang dipanggilanimation-durationLama waktu animasi berjalan animation-timing-functionPola kecepatan transisi (ease, linear, dll) animation-delayWaktu tunggu sebelum animasi dimulai animation-iteration-countJumlah pengulangan (atau infinite)animation-directionArah 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@keyframesbernamagoyang, 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
Artikel ini dibaca sebanyak 2.397 kali
SAWERIA
Memuat komentar...