Anda dapat menggunakan CSS untuk menerapkan animasi sederhana pada elemen-elemen dalam halaman web. Berikut adalah contoh penggunaan animasi CSS sederhana:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
/* CSS untuk elemen yang akan dianimasikan */
.box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
animation: rotate 3s linear infinite;
}
/* CSS untuk animasi */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Dalam contoh di atas, kita menggunakan CSS untuk menerapkan animasi sederhana pada elemen dengan class “box”. Ketika halaman web dimuat, elemen “box” akan berputar secara terus-menerus.
.box: Digunakan untuk mengatur properti dasar dari elemen yang akan dianimasikan, seperti ukuran dan warna latar belakang.animation: rotate 3s linear infinite;: Digunakan untuk mengatur animasi pada elemen dengan nama animasi “rotate”. Durasi animasi adalah 3 detik, mode transisi adalah linear, dan animasi akan diulang secara tak terbatas.@keyframes rotate: Digunakan untuk mendefinisikan animasi dengan nama “rotate”. Di dalamnya, kita menggunakan persentase keyframes (0% hingga 100%) untuk mengatur transformasi elemen pada titik waktu tertentu. Pada 0%, elemen tidak berputar (0 derajat), dan pada 100%, elemen berputar penuh (360 derajat).
Anda dapat menyesuaikan properti CSS dan keyframes sesuai dengan kebutuhan Anda untuk membuat animasi yang lebih kompleks. Selain itu, CSS juga mendukung berbagai properti animasi lainnya seperti perubahan warna, pergeseran posisi, dan perubahan ukuran yang dapat digunakan untuk menciptakan animasi yang menarik dan interaktif pada halaman web Anda.
