ANIMASI
Animasi dalam CSS memungkinkan Anda untuk membuat perubahan dalam tampilan atau perilaku elemen secara bertahap. Ini memungkinkan Anda untuk membuat elemen-elemen di halaman web Anda bergerak, berubah warna, ukuran, atau melakukan perubahan lainnya secara dinamis. Dengan menggunakan animasi, Anda dapat meningkatkan interaktivitas dan menarik perhatian pengguna.
Di CSS, Anda mendefinisikan animasi menggunakan @keyframes. @keyframes adalah titik-titik kunci yang menunjukkan bagaimana elemen berubah selama animasi. Misalnya, Anda dapat menentukan posisi elemen pada waktu tertentu, warna latar belakangnya, atau bahkan transformasi seperti rotasi atau penskalaan.
Setelah Anda mendefinisikan @keyframes, Anda kemudian menerapkannya ke elemen menggunakan properti animation. Properti ini memungkinkan Anda untuk mengontrol bagaimana animasi akan terjadi, termasuk durasi, fungsi waktu, jumlah pengulangan, dan lain-lain. Anda juga dapat menetapkan nama @keyframes yang ingin Anda gunakan untuk animasi tersebut.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animasi Yoyo</title>
<style>
/* Style untuk tali */
.tali {
width: 2px;
background-color: brown;
position: absolute;
top: 0;
left: 50%;
transform-origin: 50% 0%;
animation: ikutiYoyo 2s infinite alternate; /* Animasi tali mengikuti yoyo */
}
/* Style untuk yoyo */
.yoyo {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 200px; /* Awal posisi yoyo */
left: calc(50% - 25px); /* Menyesuaikan posisi tengah */
border-radius: 50%;
animation: gerakYoyo 2s infinite alternate; /* Animasi yoyo naik turun */
}
/* Keyframes untuk animasi yoyo */
@keyframes gerakYoyo {
0%,
100% {
top: 200px; /* Posisi bawah */
}
50% {
top: 0; /* Posisi atas */
}
}
/* Keyframes untuk animasi tali mengikuti yoyo */
@keyframes ikutiYoyo {
0%,
100% {
height: 200px; /* Posisi bawah */
}
50% {
height: 0; /* Posisi atas */
}
}
</style>
</head>
<body>
<div class="tali"></div>
<div class="yoyo"></div>
</body>
</html>
Dengan menggunakan kombinasi @keyframes dan animation, Anda dapat menciptakan berbagai efek visual yang dinamis dan menarik bagi pengguna Anda. Animasi ini dapat digunakan untuk meningkatkan pengalaman pengguna dan membuat situs web Anda lebih interaktif dan menarik.
