CSS Animasi sangat seakan-akan dengan CSS Transisi. Ini ialah sintaks CSS3 Istimewa untuk membuat efek animasi secara otomatis:
Untuk membuat efek animasi dengan CSS, hal pertama yang harus Anda kuasai sebelum memulai ini tentunya ialah kebijaksanaan konsep animasi itu sendiri:
Membangun Animasi
/* Safari & Chrome */ @-webkit-keyframes mamastopik { 0% {background-color:green;} 25% {background-color:yellow;} 50% {background-color:red;} 75% {background-color:blue;} 100% {background-color:orange;} } /* Firefox 5+ */ @-moz-keyframes mamastopik { 0% {background-color:green;} 25% {background-color:yellow;} 50% {background-color:red;} 75% {background-color:blue;} 100% {background-color:orange;} } /* IE 10+ */ @-ms-keyframes mamastopik { 0% {background-color:green;} 25% {background-color:yellow;} 50% {background-color:red;} 75% {background-color:blue;} 100% {background-color:orange;} } /* Opera 12+ */ @-o-keyframes mamastopik { 0% {background-color:green;} 25% {background-color:yellow;} 50% {background-color:red;} 75% {background-color:blue;} 100% {background-color:orange;} } /* Standar W3C */ @keyframes mamastopik { 0% {background-color:green;} 25% {background-color:yellow;} 50% {background-color:red;} 75% {background-color:blue;} 100% {background-color:orange;} }Memanggil Animasi
#boks { -webkit-animation:mamastopik 10s; -moz-animation:mamastopik 10s; -ms-animation:mamastopik 10s; -o-animation:mamastopik 10s; animation:mamastopik 10s; }Objek yang Ingin Dianimasikan
<div id="boks"></div>Langkah pertama yang harus Anda lakukan ialah membangun sistem animasi, yaitu menuliskan secara detail langkah-langkah dari awal animasi hingga berakhirnya animasi. Manipulasi penampilan dilakukan dangan cara menuliskan properti-properti CSS biasa. Tidak ada keistimewaan.
Langkah berikutnya ialah memanggil animasi. Ini dilakukan dengan cara menuliskan deklarasi -webkit-animation:mamastopik 10s;-moz-animation:mamastopik 10s;-ms-animation:mamastopik 10s;animation:mamastopik 10s; dalam selektor objek yang Anda inginkan (dalam hal ini Saya menerapkannya dalam sebuah elemen #boks).
mamastopikialah nama animasi. Ini tidak mutlak, Anda dapat menuliskan nama animasi sesuka hati (dengan mengikuti peraturan sintaks CSS tentunya)10sialah waktu tempuh sistem animasi yang Anda berdiri dalam satuan detik (s). Kalau waktu tempuh film kartun biasanya sekitar 30 menit, sinetron Korea biasanya sekitar 1 - 2 jam. Milidetik juga dapat dipakai (ms), namun tidak untuk menit dan di atasnya.
Efek Animasi Tak Terbatas
Efek animasi tak terbatas maksudnya ialah animasi akan berjalan terus-menerus tanpa henti. Hal ini dapat dilakukan dengan cara menambahkan nilai infinite sesudah durasi:
#boks { -webkit-animation:mamastopik 5s infinite; -moz-animation:mamastopik 5s infinite; -ms-animation:mamastopik 5s infinite; -o-animation:mamastopik 5s infinite; animation:mamastopik 5s infinite; }Lebih Detail Tentang Konfigurasi Animasi
Delay, direksi, langkah animasi, percepatan dan waktu tempuh dapat diterapkan dengan cara menuliskannya secara terpisah:
#boks { /* Safari & Chrome */ -webkit-animation-name: mamastopik; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-fill-mode: forwards; -webkit-animation-play-state: running; /* Firefox */ -moz-animation-name: mamastopik; -moz-animation-duration: 10s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz--animation-fill-mode: forwards; -moz-animation-play-state: running; /* IE */ -ms-animation-name: mamastopik; -ms-animation-duration: 10s; -ms-animation-timing-function: linear; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; -ms-animation-fill-mode: forwards; -ms-animation-play-state: running; /* Opera */ -o-animation-name: mamastopik; -o-animation-duration: 10s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-fill-mode: forwards; -o-animation-play-state: running; animation-name: mamastopik; animation-duration: 10s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-play-state: running; } /* Khusus untuk sintaks IE Saya masih belum dapat menjamin, alasannya Saya masih belum menemukan acuan yang tepat. */| Deklarasi | Keterangan |
|---|---|
animation-name:mamastopik; | Mendeklarasikan nama animasi |
animation-duration:10s; | Waktu tempuh animasi |
animation-timing-function:linear; | Percepatan animasi/Easing animasi. Anda dapat mempelajari jenis-jenis percepatan animasi pada tutorial CSS Transisi |
animation-delay:2s; | Delay animasi. Semacam waktu malas/penambahan waktu ancang-ancang sebelum animasi dijalankan. |
animation-direction:alternate; | Menentukan apakah dikala animasi selesai dijalankan (mencapai 100%) akan mengambil langkah kembali menuju 0% sebagai animasi lanjutan itu sendiri kemudian memulai animasi itu kembali dari 0% atau pribadi menyentakkan diri menuju animasi 0% dan memulainya kembali menuju 100%. Nilainya dapat berupa normal atau alternate » lihat misalnya di sini |
animation-fill-mode:forwards; | Nilainya dapat forwards atau backwards. Fungsinya untuk memilih apakah properti animasi dijalankan dari 0% menuju 100% atau sebaliknya, dari 100% menuju 0% » pelajari di sini |
animation-play-state:running; | Menentukan apakah animasi akan berjalan atau berhenti. Nilainya dapat berupa running atau pause. (Tidak terlalu penting) |
Memperpendek Deklarasi
Urutannya adalah: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
#boks { -webkit-animation:mamastopik 8s ease-in-out 1s infinite alternate; -moz-animation:mamastopik 8s ease-in-out 1s infinite alternate; -ms-animation:mamastopik 8s ease-in-out 1s infinite alternate; -o-animation:mamastopik 8s ease-in-out 1s infinite alternate; animation:mamastopik 8s ease-in-out 1s infinite alternate; }0% ⇒ 100% = from ⇒ to
@-webkit-keyframes fadeIn { from {opacity:0;} to {opacity:1;} } @-moz-keyframes fadeIn { from {opacity:0;} to {opacity:1;} } @-ms-keyframes fadeIn { from {opacity:0;} to {opacity:1;} } @-o-keyframes fadeIn { from {opacity:0;} to {opacity:1;} } @keyframes fadeIn { from {opacity:0;} to {opacity:1;} }