Cara Cepat Belajar Pure CSS3 Animation.

Hello world, Pada kesempatan kali ini Kang Rian ingin berbagi ilmu secara instan di dalam 1 halaman membahas seputar CSS Animasi ( Support di semua Browser ).

Apa itu Pure CSS Animation ?
Maksud dari Pure sendiri adalah , Pembuatan Animasi yang hanya menggunakan satu metode yaitu CSS (Cascading Style Sheets) , tanpa di iringi dengan panggilan Bumbu Javascript, dsb .

Berikut Simple Demonstrasi-nya sob :



Dan berikut adalah contoh mudah Syntax CSS Animasi  :

.animasi {

position:relative;

animation:sukasuka 3s infinite; /*Safari*/

-webkit-animation:sukasuka 3s infinite; /*Chrome*/

}



@keyframes sukasuka

{

0% {top:0px; }

50% {top:50px;}

100% {top:0px;}

}



@-webkit-keyframes sukasuka /*Safari and Chrome*/

{

0% {top:0px; }

50% {top:5px;}

100% {top:0px;}

}

Pengertian dari Syntax CSS Animation di atas :

1. @keyframes : keyframes berfungsi untuk menentukan gerak animasi ..

2. sukasuka : itu hanyalah sebuah nama animasi yang menentukan animasi yang dibuat melalui properti @keyframes seperti contoh di atas , bisa dirubah sesuka hati sobat.

3. % : Persentase , nah! didalam @keyframe / menentukan gerak animasi , sobat bisa menggunakan persentase agar lebih mudah , setiap persentase 0 - 100% bisa sobat kreasikan sesuka-hati sobat. :)

4. -webkit- : Hmm, untuk sobat yang paham Syntax CSS3 , itu pasti udah pada tau yah :D .. Untuk sobat yang belum tau , -webkit- sendiri berfungsi agar CSS Animasi berjalan pada Browser-browser baru, seperti Google Chrome & Safari.

5. 3s : 3 Second , maksud nya adalah untuk menentukan durasi / kecepatan animasi yang di buat dari @keyframes tadi . :)

6. infinite : Maksudnya adalah menentukan bahwa animasi yang dibuat dari @keyframes tadi bergerak terus-menerus ( tanpa henti ) . Hehe kalo Bahasa sunda nya tuh "Teu Eureun-eureun" :D hehe *kidding


* Sekian penjelasan seputar Pure CSS3 Animation menurut Kang Rian , semoga postingan "Cara Cepat Belajar Pure CSS3 Animation" ini bermanfaat. Kurang dan lebih nya mohon dimaafkan, karena si akang juga sama-sama masih belajar.! hehe , untuk pertanyaan seputar CSS3 Animasi silahkan Komentar pada Form Komentar dibawah postingan ini .

Referensi : http://w3schools.com/css/css3_animations.asp