6 Web Animasi Dari CSS Terbaik Tahun Ini

CSS Cascading Style Sheet sebagai salah satu kode pemrograman yang fungsinya untuk mempercantik dan mengatur komposisi layout sebuah web belakangan ini semakin berkembang, terutama mengarah kepada animasi yang dulu masih kuasai oleh Adobe Flash, .gif, Html5 dan kini CSS. Berikut 6 web animasi css terbaik tahun ini.

Belakangan mulai banyak web-web atau blog yang secara terang benderang menghiasi halaman webnya dengan animasi yang dibuat pure dari CSS dan nampaknya akan semakin berkembang trendnya kedepan, akankah benar-benar terjadi evolusi web animasi berkiblat dengan CSS dan HTML? Kita lihat saja nanti sebab di luar sana programmer mulai intens dan melirik ini menjadi salah satu tantangan baru dan sumber penghasilan baru bagi codingers yang tak bisa menggunakan software grafis tapi ingin membuat animasi layaknya sebuah web Flash.

Animasi yang dibuat dari pure CSS ini hasilnya tak kalah keren, semua berjalan smooth seperti animasi lainnya. Nah, beberapa contoh animasi yang dibuat dari pure CSS bisa kita lihat disini, mungkin bisa menjadi inspirasi bahkan berpeluang menjadi sumber penghasilan baru. Kamu pasti tidak akan menyangka kalau semua ini dibuat dari pure CSS!


1. A Violent Act

Kita mulai dari yang paling simpel tapi dengan illustrasi yang tidak kalah keren, yup, semua dibuat dari pure CSS! A Violent Act menggunakan teknik masking dan gerakan yang halus untuk menarik perhatian pengunjung, A Violent Act adalah jasa pembuatan gambar SVG.

Lihat animasinya:
sbs.com.au/aviolentact


2. USA Today

Disini kamu akan disajikan tampilan animasi salju dan gerakan riak air yang begitu smooth, gerakkan kursor atau jarimu di smartphonemu maka bola biru akan bergelombang layaknya riak air yang mendayu. Animasi CSS ini menggunakan SVG yang menggunakan teknik 2 layer animasi dengan menerjemahkan nilai Y ke frame utama dengan efek durasi yang berbeda-beda.

Lihat animasinya:
usatoday.geex-arts.com


3. Smart Circle

Buat kamu yang terbiasa melihat web flash mungkin nggak akan asing dengan tampilan menu dan pergerakan animasi berikut. Yup, semua dibuat dengan pure CSS yang di konvert menjadi SVG. Lingkaran ditengah menjadi tombol utama, di animasi ini animasi dibagi menjadi dua bagian besar, memutar 360 derajat dan ikon animasi-animasi menu yang aktif. Semua berjalan sangat smooth berasa sedang mengunjungi web Flash.

Lihat animasinya:
couleecreative.com


4. The Dark Color

Sama seperti Smrat Circle, di situs Da-Ink kamu akan menemukan website rasa Flash, semua tampil smooth, mulai dari transisi, zoom in-out. Pembuatnya mengatakan untuk membuat tampilan seperti web Flash ini dia mengubah posisi X dengan menyesuaikan lebar SVG, dan menggunakan tipe-n, mengatur pause, merunut gerakan setiap 75 ms agar transisi berjalan mulus. Wow.

Lihat animasinya:
da-ink.com


5. Bublle Lemon

Lagi-lagi seperti web Flash, apakah CSS kedepan akan benar-benar menggantikan web animasi berbasis Flash ini? Cobalah kunjungi website ini kamu akan dibuat takjub karena bisa dibilang sulit membedakan apakah ini dibuat dari Flash atau bukan. Dengan penggabungan gambar SVG elemen semua berjalan begitu smooth, bubble di buat menjadi beberapa group, dan semua tombol berjalan dengan sangat baik. Menurut pembuatnya animasi ini terbagi jadi dua bagian besar, untuk gelembung dibuat dari SVG yang transparan, dan men-menu yang elastis dengan durasi yang cukup dekat agar presesi. Keren!

Lihat animasinya:
7up.nl/7up


6. Free Bird

Membuat animasi dengan CSS horisontal seperti burung-burung yang terbang ini menurut pembuatnya sama mudahnya ketika menggunakan motion tween di Flash. Dengan memanipulasi titik vector dan membulatkan garis tepinya di dapat sudut pergerakan yang hidup. Burung dibuat dalam SVG terdiri dari 10 sel dan melipatgandakan 10 x lebih besar. Setiap frame masuk dalam group yang berukuran sama kemudian di ubah menjadi SVG. Dengan perintah HTML sederhana semua halaman bisa berjalan sempurna.

Lihat animasinya:
fournier-pere-fils.comhome

Artikel ini terbit juga di: Kaskus