Assalamualaikum wr.wb
A. JUDUL
CSS : Pengenalan Tentang Animasi CSS
B. PENDAHULUAN
1. Pengertian
Animasi CSS adalah modul yang diusulkan untuk Cascading Style Sheets yang memungkinkan animasi elemen dokumen HTML menggunakan CSS.
2. Latar Belakang
Banyak website yang menggunakan animasi, baik dalam bentuk GIF,SVG, Video latar, dll. Ketika digunakan dengan benar, animasi dapat memberikan kesan hidup dan interaktifitas.
3. Maksud dan Tujuan
- Untuk memberikan kesan hidup dalam sebuah website atau aplikasi yang dibuat
- Untuk memberikan kesan berbeda dengan yang lainnya.
4. Hasil yang Diharapkan
Tahu tentang apa sih itu Animasi CSS.
C. ALAT DAN BAHAN
- Laptop
- Koneksi Internet (Mencari Referensi)
D. JANGKA WAKTU PELAKSANAAN
1 Jam
E. PEMBAHASAN
The @keyframes Aturan
Ketika Anda menentukan gaya CSS di dalam
@keyframes
aturan, animasi secara bertahap akan berubah dari gaya saat ini untuk gaya baru pada waktu tertentu.Untuk mendapatkan animasi untuk bekerja, Anda harus mengikat animasi untuk elemen.
Contoh berikut mengikat "contoh" animasi dengan elemen <div>. animasi akan berlangsung selama 4 detik, dan secara bertahap akan mengubah background-warna <div> elemen dari "merah" untuk "kuning":
Disini sebenarnya berubah-ubah.
The
animation-duration properti mendefinisikan berapa lama waktu animasi harus mengambil untuk menyelesaikan. Jika animation-durationproperti tidak ditentukan, tidak ada animasi akan terjadi, karena nilai default adalah 0s (0 detik).
Dalam contoh di atas kita telah ditentukan ketika gaya akan berubah dengan menggunakan kata kunci "dari" dan "untuk" (yang mewakili 0% (mulai) dan 100% (lengkap)).
Hal ini juga memungkinkan untuk menggunakan persen. Dengan menggunakan persen, Anda dapat menambahkan banyak perubahan gaya yang Anda inginkan.
F. HASIL YANG DI DAPATKAN
Dapat mengerti dan paham cara kerja Animasi CSS
G. KESIMPULAN
Jadi membuat Animasi dengan CSS akan membuat kesan hidup dalam sebuah website.
H. REFERENSI
- https://translate.google.com/translate?hl=id&sl=en&u=https://en.wikipedia.org/wiki/CSS_animations&prev=search
- https://www.w3schools.com/css/css3_animations.asp
Emoticon