Cara membuat animasi di website bisa dilakukan dengan menggunakan Keyframe CSS. Simak penjelasan selengkapnya di artikel kami berikut ini!
Dalam sebuah website, animasi dapat meningkatkan user experience menjadi lebih interaktif dan menarik. Salah satu cara populer untuk membuat animasi dengan CSS adalah menggunakan fitur Keyframe. Meskipun tersedia banyak library animasi, keyframe CSS memberikan fleksibilitas untuk menciptakan animasi secara manual sesuai kebutuhan. Dalam artikel ini, kita akan membahas dasar-dasar keyframe dan cara membuat animasi di website dengan menggunakannya.
Table of Contents
Apa Itu Keyframe CSS?
Keyframe CSS adalah fitur yang memungkinkan kita mendefinisikan tahapan-tahapan dalam pembuatan animasi. Dengan Keyframe, kita bisa menentukan perubahan animasi yang diinginkan dalam rentang waktu tertentu.
Cara Membuat Animasi di Website: Contoh Implementasi
Mari kita buat contoh animasi sederhana untuk menggerakan kotak menggunakan keyframes
. Jadi yang harus dilakukan pertama adalah mendefinisikan keyframes
seperti dibawah ini.
Contoh
@keyframes move-right-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
keyframes
selalu dimulai dari 0% sebagai titik awal dari animasi dengan 100% sebagai titik akhirnya. Setelah mendefinisikan keyframe nya , selanjutnya kita terapkan ke elemen HTML dengan menambahkan property animation
.box{
width: 100px;
height: 100px;
background-color: red;
animation: move-right-animation 2s;
}
Hasil Implementasi
Jika sudah, hasilnya akan terlihat seperti dibawah ini.

Dari contoh implementasi keyframes diatas, kita sudah berhasil membuat animasi menggerakan kotak dari kiri ke kanan. Namun , anda akan bertanya apakah bisa kotak tersebut kembali ke posisi awal dengan animasi juga? Tentunya bisa.
@keyframes move-right-animation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100%{
transform: translateX(0px);
}
}
Kita cukup menambahkan titik tengah yaitu 50% kedalam keyframes
dan memindahkan properti transform: translateX(200px)
ini kedalam titik tengah nya. Lalu, pada titik akhir, kita tambahkan properti yang sama dengan titik awalnya.
Tampilan Animasi di Website

Kesimpulan
Itu dia cara membuat animasi website menggunakan Kyeframe CSS. Dengan Keyframe CSS, kita dapat dengan mudah menambahkan animasi ke dalam tampilan website dan mengatur pergerakan elemen HTML dalam rentang waktu yang sesuai. Setelah membaca artikel ini, Anda bisa mulai bereksperimen untuk membuat animasi yang menarik dan sesuai untuk website Anda.
Jika perusahaan Anda membutuhkan bantuan untuk mengembangkan website profesional, LOGIQUE menyediakan jasa pembuatan website. Hubungi kami untuk konsultasi gratis!