CSS Animation

A.PENDAHULUAN

a.Pengertian

animasi merpakan sebuah gambar yang bergerak. berfungsi untuk menjadikan website menjadi lebih menarik.

salah satu contoh penerapan animasi dalam website adalah seperti diatas. yang merupakan sebuah animasi sederhana .animasi membuat objek bergerak sesuai dengan kode css yang kita atur

b.Latar Belakang Masalah

agar website menjadi lebih menarik dan tidak kaku

B.MAKSUD DAN TUJUAN

membuat animasi di html

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

membuat objek, membuat key frames, membuat animasi

D. TARGET DAN HASIL YANG DIHARAPKAN

dapat membuat objek memiliki animasi

E.METODE PELAKSANAAN PEKERJAAN

membaca referensi dan mempraktikannya

F.ALAT DAN BAHAN

- laptop

- sublime

- browser

G.TAHAPAN PELAKSANAAN

A. membuat objek

-buka text editor (sublime, notepad, dll)

- buat div

- beri style ke div tadi seperti width , height, background color

B. membuat keyframes

- kemudian membuat keyframes alias template animasi

- ketik @keyframes nama_animasi{}

- kemudian diantara kurung kurawal barulah kita tulis seperti ini

@keyframes nama_animasi{

from{}

to{}

}

- lalu diantara kurung kurawal from{} kita tulis style awal dan di antara kurung kurawal to{} kita tulis style yang ingin dirubah ketika animasi dimulai.

from{background-color: red;}

to{background-color: green;}

- keyframes ini akan mengubah warna objek yang asalnya merah ke hijau, namun key frame ini masih dibuat dan belum ditambahkan alias belum dipakai ke objek

C. menambahkan animasi di objek tadi

- cara menambahkan animasi ke objek adalah dengan kode animation

- pergi ke objek tadi dan ketik:

animation : nama_animasi 5s infinite linear;

- infinite adalah jumlah animasi ini dipanggil dan infinite artinya animasi ini akan dipanggil berulang-ulang.

- linear adalah kecepatan animasi dijalankan, linear berarti animasi akan berjalan dengan percepatan yang normal.

- 5s artinya animasi akan berjalan selama 5 detik

H.TEMUAN PERMASALAHAN SERTA CARA PENYELESAIAN MASALAHNYA.

I.KESIMPULAN YANG DIDAPATKAN

- animasi dapat membuat website lebih menarik

- salah ketik satu huruf dapat menyebabkan bug

J.REFERENSI