Putar!
Pelajaran 4 dari 6 dalam kursus Proyek CSS: Spinner Pemuatan Sederhana di Coddy.
Untuk membuat animasi hanya dengan CSS, kita akan menggunakan keyframes dengan sintaks berikut
@keyframes animation_name {
from {
...
}
to {
...
}
}Perhatikan animation_name, yaitu nama animasi yang dapat diubah. Di dalam blok from dan to, kamu harus memasukkan perubahan pada property CSS, contohnya,
@keyframes fade_out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}Contoh di atas akan membuat animasi dari opacity 1 ke opacity 0.
Untuk menerapkan animasi di atas ke elemen tertentu, gunakan, misalnya,
#spinner {
animation: fade_out 1.3s infinite;
}Contoh di atas akan menerapkan animasi fade_out ke elemen #spinner, dengan durasi 1.3 detik, dan animasi akan berjalan tanpa batas.
Tantangan
MudahGunakan keyframes untuk menganimasikan rotasi #spinner.
Animasi harus berjalan selama 1.5 detik dan berulang tanpa batas.
Beri nama animasi sesuai keinginanmu
Jika kamu tidak yakin cara menganimasikan rotasi, lihat petunjuknya.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="spinner" />
</body>
</html>Semua pelajaran di Proyek CSS: Spinner Pemuatan Sederhana
Latihan sendiri: Playground Web