Saat ini sudah banyak halaman website yang memakai animasi untuk memperindah tampilan, animasi sendiri bisa dibuat dengan teknik SVG, GIF, WebGL, Video dan beberapa teknik lainnya.

Dalam kesempatan kali ini nyekrip akan share tentang teknik cara membuat animasi dengan CSS, teknik membuat animasi dengan css adalah sebuah cara untuk menambahkan animasi pada halaman web dengan performa yang lebih baik dari pada teknik yang telah disebutkan diatas. Teknik ini menjadi populer karena semakin mendapat dukungan dari browser-browser papan atas.

Dalam tutorial ini kita tidak langsung terjun membuat animasi, melainkan akan mempelajari dulu dasar-dasar dalam cara membuat animasi dengan css. Setelah selesai dengan pembahasan dasar, kita akan membuat contoh animasi sederhana dengan mengubah sebuah kotak menjadi sebuah lingkaran dan akan mengembalikannya menjadi kotak kembali.

Berikut adalah gambar dari hasil akhir animasi yang telah selesai dibuat, anda bisa mendownload sekaligus merubahnya secara live dengan mengeklik tombol “Run Skrip”.

Hasil_Animasi_Cara_Membuat_Animasi_dengan_CSS_3_Dasar_Nyekrip

Hasil Akhir Animasi

 

@keyframes dan Animation Pada CSS

Dalam CSS terdapat komponen @keyframes, komponen ini adalah komponen utama dari pembuatan animasi, dalam komponen ini kita bisa menentukan aturan-aturan CSS untuk membuat sebuah animasi.

Kita bisa membayangkan @keyframes sebagai tempat dari beberapa tahapan dan merangkainya sebagai timeline pada animasi. Di dalam @keyframes yang dibuat kita bisa menentukan style yang berbeda pada masing-masing tahap. Style bisa berupa warna, bentuk dan bahkan arah pergerakan.

Mengenal Komponen @keyframes CSS

Dalam Komponen ini kita bisa mengatur dari tahapan-tahapan animasi yang telah dibuat. Sebagai contoh dalam penggunaan komponen @keyframes, mari kita lihat skrip berikut.

Dalam skrip diatas terdapat tulisan nyekripFade, tulisan ini merupakan nama dari komponen @keyframes, selain itu terdapat dua tahap yaitu tahap animasi di 0% dan 100%, lihat pada kedua tahap tersebut telah ditentukan nilai opacity yang berbeda. Pada skrip ini akan memberikan efek transisi terhadap opacity dari sebuah elemen, dari opacity: 1 menjadi opacity: 0.

Mengenal Atribut Animation CSS

Setelah kita menentukan nama dan tahapan-tahapan pada @keyframe, lagkah selanjutnya yang harus dilakukan adalah memanggilnya dan meletakkannya dalam sebuah selektor CSS. Cara untuk memanggilnya adalah dengan menggunakan atribute animation.

Atribut animation memiliki beberapa properti sebagai berikut:

  • animation-name: nama @keyframes.
  • animation-duration: total durasi animasi.
  • animation-timing-function: kecepatan pada animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay: durasi tunda animasi.
  • animation-iteration-count: jumlah perulangan animasi.
  • animation-direction: pergerakan arah animasi.
  • animation-fill-mode: style ditentukan ke elemen ketika animasi selesai( none | forwards | backwards | both ).

Sebagai contoh, mari kita lihat skrip berikut.

Pada skrip diatas kita bisa mengetahui bahwa animasi yang dipanggil bernama nyekripFade dengan durasi selama 4 detik, delay awal selama 1 detik, tidak ada batasan dalam perulangan dan dengan arah yang berbalik.

Mengenal Awalan Vendor CSS

Agar skrip dapat didukung oleh browser-browser populer seperti Chrome, Firefox atau Opera, maka kita harus menambahkan awalan khusus, awalan-awalan tersebut adalah:

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-

Dengan menerapkan awalan vendor, maka skrip untuk pemanggilan animasi supaya compatibel dengan browser Chrome akan menjadi seperti ini.

Sedangkan skrip untuk untuk @keyframe akan menjadi seperti ini.

Perhatikan bahwa ada tambahan berupa -webkit-, Jika anda ingin mengetahui lebih lanjut tentang awalan vendor, silahkan kunjungi website http://css3please.com/.

Cara Membuat Banyak Animasi CSS 3

Kita bisa membuat banyak animasi dan diterapkan dalam satu elemen, caranya dengan menambahkan tanda koma , diakhir baris skrip. Misal kita ingin menambahkan efek rotasi pada animasi nyekripFade, kita dapat melakukannya dengan membuat @keyframes baru dan kemudian mengaitkannya ke dalam element kita, perhatikan skrip dibawah ini:

Cara Membuat Animasi dengan CSS 3: Merubah Kotak menjadi Lingkaran

Setelah mempelajari dasar-dasar dalam pembuatan animasi dalam CSS3, marilah kita membuat animasi secara sederhana dengan mengubah elemen kotak menjadi lingkaran dan setelah itu kita balik dari lingkaran menjadi kotak kembali. Karena didalam tutorial ini menggunakan browser chrome sebagai browser, maka akan diberikan awalan –webkit-.

Pertama yang kita lakukan adalah menentukan berapa banyak tahapan dalam animasi yang akan kita buat, misal dalam contoh ini kita akan membuat lima tahapan dan masing-masing tahapan akan kita beri style berupa perubahan bentuk ke lingkaran dengan memanfaatkan atribut CSS yaitu border-radius.

Agar terlihat menarik, kita juga akan menambahkan efek berputar dan perubahan warna background elemen. Sebelum membuat skrip CSS, kita akan buat dulu halaman HTML dengan struktur umum halaman HTML.

Membuat Elemen Animasi

Kita akan menggunakan struktur HTML dibawah ini, jika anda ingin mengetahui lebih lanjut tentang pembahasan Struktur umum HTML silahkan kunjungi artikel Pengenalan HTML: Struktur Umum.

Skrip Struktur Umum

Pada elemen body cukup kita berikan 1 tag <div> berserta penutupnya </div> tanpa ada isi didalamnya, pada tag <div> ini nantinya akan kita terapkan animasi. Selanjutnya berikan style awal berupa ukuran dan warna pada elemen div ini dengan menambahkan skrip dibawah ini diantara tag style.

Membuat @keyframe

Selanjutnya kita membuat @keyframe dan memberi nama kotak-ke-lingkaran, kita akan memberinya lima tahapan sesuai rencana sebelumnya. Disetiap tahapan akan memiliki efek perubahan bentuk,warna dan arah rotasi, sehingga skrip menjadi seperti berikut:

Menerapkan Animasi

Setelah pembuatan @keyframe, yang kita lakukan selanjutnya adalah memanggil animasi tersebut dan meletakkannya pada elemen <div> yang sudah kita buat sebelumnya, untuk itu kita perlu menambahkan skrip berikut ini kedalam selektor div {}.

Untuk hasil akhir skrip akan tampak seperti berikut ini.

Jalankan Skrip diatas pada browser Chrome atau browser Safari, maka akan muncul animasi berupa perubahan warna, bentuk dan pergerakan (rotasi) pada elemen <div> yang sudah kita buat sebelumnya.

Sekian tutorial Cara Membuat Animasi Dasar dengan CSS 3, disini hanya dijelaskan secara dasar, contoh yang dibahaspun juga dasar. Dengan memahami teori dasar dalam membuat animasi dengan css, pasti kita akan mengerti untuk pembuatan animasi yang lebih rumit. Jika ada kesalahan atau ada pertanyaan seputar tutorial ini, silahkan sampaikan melalui kolom komentar.

Happy Nyekrip!

 

 

#http://www.nyekrip.com/cara-membuat-animasi-dengan-css-3-dasar/

Bingung tentang sourcecode atau pemrograman yang ingin dipelajari? TANYA DI SINI
Bingung cari modul, soal, pembahasan mata kuliah? CARI DI SINI