DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Membuat animasi css

advertisement
Membuat Animasi Dengan 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

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 instan pindah 2s linear 0s infinite alternate;
animation-delay Digunakan untuk menentukan jeda animasi 5s (5 detik)
animation-direction Digunakan untuk menentukan arah animasi alternate | reverse
animation-duration Digunakan untuk mengatur durasi animasi 10s
animation-fill-mode Digunakan untuk mengatur fill mode none | forwards | backwards | both
animation-iteration-count Digunakan untuk menentukan berapa kali animasi diputar 10 | infinite 
animation-name Digunakan untuk memberi nama animasi yang kemudian digunakan pada rule @keyframe nama animasi pada @keyframe
animation-play-state Digunakan untuk mengatur state. pause | running
animation-timing-function Digunakan untuk mengatur animasi pada setiap framing selama durasi. linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
Bukan hanya propeti yang diperlukan untuk membuat animasi.
Kita juga membutuhkan rule yang namanya @keyframes yang akan di mengatur step awal sampai step akhir animasi berdasarkan nama animasinya.

Cara membuat animasi dengan css

Sebagai contoh kita akan coba buat animasi elemen gambar yang begerak kekiri dan kekanan.
  1. 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 from dan to harus sama.
  2. Kemudian kita 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*/
    }
  3. Kemudian pada html, kita buat elemen dengan tag img, kodenya seperti berikut,
    <img src="car.png" width="94"/>
  4. Sehingga kode akhirnya, seperti berikut,
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title>Deretcode.com</title>
          <style>
    	@keyframes car {
    	   from {left: 10px;}
    	   to {left: 560px;}
    	 }
            img{
    	   animation-name: car;
    	   animation-duration: 3s;
    	   animation-iteration-count:infinite;
    	   animation-direction:alternate;
    	   position:relative;
    	}
          </style>
       </head>
       <body>
          <img src="car.png" width="94"/>   
       </body>
    </html>
  5. Jika kita buka di browser hasilnya seperti berikut,

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!
advertisement



0 Komentar untuk " Tutorial belajar css # Membuat animasi css"

Silahkan berkomentar dengan baik dan bijak!