Tutorial belajar css# Membuat animasi menggunakan css

Hal keren yang bisa kita lakukan dengan css adalah membuat animasi.
Kita bisa membuat efek animasi pada teks, gambar, video dan elemen elemen yang lainnya.
Animasi akan membuat halaman web menjadi tersara lebih hidup dan lebih modern.

Yuk kita langsung saja ketutorialnya,

Daftar Isi

Properti dan rule css untuk membuat animasi
Membuat animasi dengan css

Properti dan rule css untuk membuat animasi

Untuk dapat mengimplementasikan animasi pada elemen. Kita akan menggunakan properti-properti yang sudah di sediakan.

Yaitu,

Properti	Keterangan	Nilai
animation	Digunakan untuk membuat animasi hanya secara singkat	name duration timing-function delay iteration-count direction fill-mode play-state
animation-delay	Digunakan untuk mengatur jeda dari animasi	time \| initial \| inherit
animation-direction	Digunakan untuk menentukan arah dari animasi	normal \| reverse \| alternate \| alternate-reverse \| initial \| inherit
animation-duration	Digunakan untuk mengatur durasi dari animasi	time \| initial \| inherit
animation-fill-mode	Digunakan untuk mengatur animasi ketika dalam kondisi awal dan akhir	none \| forwards \| backwards \| both \| initial \| inherit
animation-iteration-count	Digunakan untuk mengatur berapa kali animasi di mainkan	number \| infinite \| initial \| inherit
animation-name	Digunakan untuk memberikan nama pada animasi	keyframename \| none \| initial \| inherit
animation-play-state	Digunakan untuk menentukan kondisi awal animasi ketika element di muat	paused \| running \| initial \| inherit
animation-timing-function	Digunakan untuk mengatur animasi pada setiap frame selama durasi (animasi efek)	linear \| ease \| ease-in \| ease-out \| ease-in-out \| step-start \| step-end \| steps(int,start \| end) \| cubic-bezier(n,n,n,n) \| initial \| inherit

Bukan hanya propeti yang diperlukan untuk membuat animasi.

Kita juga membutuhkan rule yang namanya @keyframes yang akan mengatur step awal sampai step akhir jalannya animasi tiap frame.

Membuat animasi dengan css

Sebagai contoh kita akan coba buat animasi element gambar yang begerak kekiri dan kekanan.

Buat rule @keyframes contohnya seperti berikut,

@keyframes car {
    from {left: 10px;} /* batas awal, kalain bisa menggantinya dengan properti lain sperti margin-left */
    to {left: 560px;} /*batas akhir, kalian bisa menggantinya dengan properti lain seperti margin-left */
}

Note: properti pada from dan to harus sama.

Buat selector menggunakan tag img dengan properti animasi,

img{
   animation-name:car; /*nama animasi sesuai rule keyframe yang sudah kita buat */
   animation-duration:3s; /* durasi animasi dari step awal sampai akhir */
   animation-iteration-count:infinite; /* tipe animasi, disini kita menggunakan infinite, artinya animasi tanpa henti*/
   animation-direction:alternate; /* digunakan untuk menentukan arah, disini kita menggunakan alternate, artinya bolak balik*/
   position:relative; /* karena pada rule keyframe yang kita atur adalah properti left, maka posisinya harus dirubah ke tipe relative*/
}

Pada dokument html, kita buat element dengan tag img, kodenya seperti berikut,
```
<img src="car.png" width="94"/>
```
Keseluruhan kodenya seperti berikut,

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> @keyframes car{ 0% {left: 10px;transform:scaleX(1);} 50% {left: 560px;transform:scaleX(1);} 51%{transform:scaleX(-1);} 100%{left: 10px;transform:scaleX(-1);} } img{ animation-name: car; animation-duration: 3s; animation-iteration-count:infinite; position:relative; } </style> </head> <body> <img src="https://www.deretcode.com/assets/uploads/20210510/42a374997767a0f6e39ac5c76ef74aa5.jpg" width="94"/> </body> </html>

Output :
Silahkan klik tombol run untuk melihat hasilnya,

Sampai disini tutorial cara membuat animasi menggunakan css.
Silahkan kalian improvisasi dan buat animasi menarik versi kalian.
Jika menurut kalian artikel ini bermanfaat, silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis dikolom komentar.

Good luck!