Untuk menambahkan interaksi pada halaman web Anda, Anda dapat menggunakan transisi CSS dan animasi. Transisi memungkinkan Anda untuk mengubah properti elemen dari satu nilai ke nilai lain secara halus dalam jangka waktu tertentu. Animasi memungkinkan Anda untuk membuat gerakan dan interaksi pada halaman web Anda.
Berikut adalah contoh kode CSS untuk menambahkan transisi pada elemen:
button {
transition: background-color 0.5s ease;
}
button:hover {
background-color: lightblue;
}
Dalam contoh di atas, kita menentukan bahwa elemen tombol akan memiliki transisi untuk properti background-color dengan durasi 0,5 detik dan easing (efek perlahan). Kemudian, kita menentukan bahwa saat cursor berada di atas elemen tombol, warna latar belakang akan berubah menjadi biru muda (lightblue).
Berikut adalah contoh kode CSS untuk menambahkan animasi pada elemen:
@keyframes example {
from {
transform: translateY(0);
}
to {
transform: translateY(-100px);
}
}
button {
animation: example 1s;
}
Dalam contoh di atas, kita menentukan keyframe animasi dengan nama example, yang menentukan bahwa elemen akan bergerak dari posisi saat ini ke posisi 100px di atas saat ini dalam jangka waktu 1 detik. Kemudian, kita menentukan bahwa elemen tombol akan menjalankan animasi example.
Dengan menambahkan transisi dan animasi, Anda dapat membuat halaman web Anda lebih interaktif dan menarik bagi pengguna.
0 Komentar