Assalamualikum wr.wb
oke bertemu lagi dengan saya kali ini saya akan sharing tentang pengenalan @keyframes
B. latar belakang
ada yang tahu kah apa itu @keyframes, @keyframes itu komponen utama dalam animasi di css untuk pembuatan animasi pake css/html.
C. maksud dan tujuan
ingin tahu apa itu @keyframes
D. Waktu pelaksanaan
2jam
E. pemahaman
Pengenalan @keyframes
Komponen utama dari animasi CSS adalah @keyframes, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan @keyframes sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam @keyframes, anda dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda.
Selanjutnya, agar animasi berjalan, anda perlu mengaitkan @keyframes tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam @keyframes dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.
@keyframes
Di sini kita akan mengatur tahapan animasi. Properti-properti di dalam @keyframes kita adalah:
Nama animasi (tutsFade dalam contoh ini).
Tahapan: 0%-100%; dari (sama dengan 0%) dan hingga (sama dengan 100%).
Style CSS: style yang anda ingin aplikasikan dalam setiap tahapannya.
Contoh:
@keyframes tutsFade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
atau:
@keyframes tutsFade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
atau dengan shorthand:
@keyframes tutsFade {
to {
opacity: 0;
}
}
Kode di atas akan menerapkan sebuah efek transisi terhadap opacity dari sebuah elemen, dari opacity: 1 menjadi opacity: 0. Masing-masing dari contoh di atas akan menghasilkan hasil akhir yang sama.
F. Alat dan bahan
aplikasi sublime
laptop
G.referenesi
https://webdesign.tutsplus.com/id/tutorials/a-beginners-introduction-to-css-animation--cms-21068
H. penutup
oke sekian dari saya bila da kesalahan saya minta maaf, semoaga bermanfaat.
Wassalamualaikum wr.wb
0 Comments
silahkan berkomentar tentang template ini