PENGERTIAN
CSS Animation adalah sebuah fitur dari css yang memungkin dapat digunakan untuk memberi efek animasi pada sebuah website tanpa bantuan javascript atau flash.
LATAR BELAKANG
Sebagai salah satu proker yang saya kerjakan dan yang akan saya selesaikan.
MAKSUD DAN TUJUAN
Tujuan saya mempelajari CSS animation ini adalah sebagai langkah awal untuk menguasai bidang forn-ent.
HASIL YANG DIHARAPKAN
Dapat menguasai CSS sebagai salah satu awal untuk menguasai bidang fron-ent.
URAIAN
Animasi memungkinkan elemen secara bertahap berubah dari satu gaya ke yang lain. Untuk menggunakan CSS animasi, kita harus terlebih dahulu menentukan beberapa keyframes untuk animasi. Keyframes menahan gaya apa elemen akan memiliki pada waktu tertentu.
ATURAN @keyframes
Ketika kita 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, kita harus mengikat animasi untuk elemen. Untuk contoh, bisa dilihat disini.
MENENTUKAN CURVE KECEPATAN ANIMASI
Animation-timing-function
Properti animasi-waktu-fungsi dapat memiliki nilai berikut:
ease - Menentukan animasi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (ini adalah default).- linier - Menentukan animasi dengan kecepatan yang sama dari awal sampai akhir
- ease-in - Menentukan animasi dengan awal yang lambat
- ease-out - Menentukan animasi dengan ujung yang lambat
- ease-in-out - Menentukan animasi dengan awal yang lambat dan akhir
- cubic-bezier - Memungkinkan Anda menentukan nilai-nilai Anda sendiri dalam fungsi kubik-bezier.
TEMUAN PERMASALAHAN
Untuk saat ini belum ada kendala.
HASIL YANG DIDAPAT
Dapat membuat CSS Animation.
KESIMPULAN
Dengan menggunakan CSS Animation kita sedikit terbantu dengan efek animasi untuk website.
REFERENSI
https://www.w3schools.com/css/css3_animations.asp
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon