Animasi Sederhana menggunakan CSS (kotak)

Okiee... Ummm... animasi yang dibuat disini hanya di test di google chrome, jadi untuk browser lain g' tau jalan atw tidak eheheh... :D
Okiee... potongan source codenya yang belum jadi seperti terlihat di bawah :

Hasilnya :

Mari kita tinjau kode yang belom selese di atas,,,bari 6 & 7 itu masing-masing nentuin lebar dan panjang div elementnya, terus line 8 itu jelas nentuin warna backgroundya, terus line 10 itu nama animasinya yang diload dari baris 15-17, trs line 11 itu durasi animasinya dan baris 12 itu iterasinya infinite.
Naaah... yang line 15 ini yang jadi inti animasi kita, 0% itu mksndya pada kondisi animasinya berjalan 0% atau pertama kali elementnya berada di kiri atas dengan warna biru, trs pas udh 12% bergerak ke kanan sambil berubah warna menjadi merah... :D :D :D
Okieee... Mari kita tambahkan progress berikutnya misalkan di kondisi 25% elementnya bergereak ke kanan terus sambil berubah warna menjadi kuning... kodenya :

Hasilnya :

Okiee...sampe sini moga2 dapat sensenya dibagian animasi, jadi terlihat perubahannya dibagian @keyframes ajjah... :D
Naah... trs @keyframesnya dibuat menjadi 100%, dan gerakannya dibuat menjadi kotak. Jadi dari kiri menuju ke kanan, terus ke bawah, terus mengarah ke kiri, ke atas dan kembali ke tempat semula eheheh... Contohnya seperti terlihat di bawah :

Eeehm... disini animation-duration menjadi 9 seconds,,trs tambahan kode dari 25% menjadi 100%... daaan... hasilnya adalaaaaah......