Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
CSS adalah bagian penting untuk menciptakan pengalaman yang menyenangkan saat mengunjungi suatu situs. Dengan CSS, elemen yang tadinya cuma diam aja bisa berubah menjadi hidup, bergerak, ganti warna, bahkan bisa muter-muter! Animasi ini nggak cuma bikin website jadi estetik, tapi juga lebih engaging buat pengunjung.
Selain itu, animasi juga bisa menarik perhatian audiens, contohnya tombol yang sedikit bergerak saat ditekan, bisa juga jadi komunikasi visual yang lebih efektif lagi. Keren, kan?
Tapi, sebelum lanjut, pastikan kamu memahami dasar dari CSS, kalau belum, coba cek artikel ini:
Yuk, kita belajar bareng cara membuat animasi dengan CSS!
Pada animasi CSS, terdapat 2 komponen dasar yang penting untuk kita pelajari terlebih dahulu, yaitu:
- @keyframes
Penggunaan @keyframes itu seperti titik-titik pada peta perjalanan. Kamu bisa atur kapan elemen mulai bergerak, ganti warna, atau bertransformasi. Animasi diatur dengan persentase (%), atau kata kunci from (awal) dan to (akhir).
- Properti animasi
Properti ini tugasnya buat “menghidupkan” animasi dengan sifatnya, seperti duration, delay, iteration-count, dsbnya.
Coba lihat kode di bawah: Codepen Animasi dengan CSS
<head>
<title>Simple Animation</title>
</head>
<body>
<div id="div"></div>
</body>
</html>#div {
width: 100px;
height: 100px;
background-color: blue;
animation-name: bergerak;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bergerak {
0% { background-color: blue; }
50% { background-color: yellow; }
100% { background-color: red; }
}
/* Atau bisa pakai ini */
@keyframes bergerak {
from { background-color: blue; }
to { background-color: yellow; }
}Penjelasan Kode di atas:
animation-name: untuk memberikan nama animasi yang akan digunakan. Nama pada kode di atas, yaitu bergerak dan akan mengarah pada blok animasi yang didefinisasikan di @keyframes.animation-duration: 2s; digunakan untuk menentukan durasi animasi, dalam hal ini animasi berlangsung selama 2 detik (2s).animation-iteration-count: infinite; digunakan untuk mengatur animasi untuk terus berjalan tanpa berhenti (infinite).0%,50%, dan 100% pada @keyframes digunakan untuk menandakan animasi di berbagai titik waktu selama durasi animasi yang telah ditentukan. 0% menandakan awal animasi, 50% berarti ditengah animasi, dan 100% menandakan di akhir animasi.Gimana? Cukup gampang bukan mengubah warna latar elemen secara bertahap dari biru, kuning, sampai merah?
Selain itu, kamu bisa coba berlatih membuat efek bouncing ball dengan melihat kode berikut ini:
Codepen Bouncing Ball dengan CSS
<head>
<title>Bouncing Ball</title>
</head>
<body>
<div class="ball"></div>
</body>
</html>.ball {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
position: relative;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-100px); }
}Penjelasan Kode di atas:
position: relative; untuk mengatur posisi elemen agar bergerak relatif terhadap posisi awalnya.animation-name:,animation-duration:, dan animation-iteration-count: secara ringkas dengan hanya menuliskan shorthand seperti berikut, animation: (name) (duration) (timing-function) (interation-count). Pada kode di atas, ditulis sebagai animation: bounce 1s ease-in-out infinite;. Dimana animasinya bernama bounce yang mengacu pada @keyframes, durasi animasinya selama 1s, ease-in-out sebagai pola kecepatan animasi yang bergerak secara perlahan dari awal mulai sampai akhir, dan infinite yang menandakan animasinya akan berjalan terus menerus tanpa henti.transform: translateY(-100px) digunakan untuk mmenggerakan elemen secara vertikal (sumbu-Y) ke atas yang ditandai dengan nilai negatif.Dalam properti animasi terdapat banyak sifat atau nama yang perlu kamu ketahui dan hafal, seperti:
animation-name
Nama animasi yang udah didefinisikan di @keyframes.animation-duration
Durasi animasi berjalan, bisa gunakan 2s untuk 2 detik.animation-timing-function
Digunakan untuk mengatur pola kecepatan animasi, misalnya ease, linier, dllanimation-delay
Waktu tunda sebelum animasi dimulai.animation-interation-count
Jumlah pengulangan animasianimation-direction
Penunjuk atau arah animasi, bisa gunakan normal, reverse, dllanimation-fill-mode
Untuk mengatur posisi setelah animasi selesai bekerja, bisa gunakan none, forwards, dll.Dalam membuat animasi dengan CSS, kamu bisa menggunakan properti transform dan opacity untuk menghindari lag atau agar animasinya smooth dalam bergerak. Daripada mengubah width atau height, gunakan scale() pada properti transform.
Dengan memahami cara membuat animasi CSS, kamu bisa bikin website yang lebih dinamis, interaktif, dan menarik perhatian pengunjung. Nggak cuma desain yang keren, pengalaman pengguna juga makin maksimal!
Gimana? Gampang banget kan bikin animasi pakai CSS? Yuk, terus belajar biar websitemu makin kece bareng Skodev!
I am a Bachelor of Indonesian Literature at Diponegoro University who has experience as a Content Creator, Copy Writer and Copy Writer
Link terkait: