Membuat Animasi di CSS3

Di CSS3 untuk membuat animasi menjadi mungkin. Animasi di buat atas dua komponen:

1. Menetapkan style-style animasinya dengan properti animation atau dengan properti subnya:
   • animation-delay
   • animation-direction
   • animation-duration
   • animation-iteration-count
   • animation-name
   • animation-play-state
   • animation-timing-function
   • animation-fill-mode, dan beberapa properti CSS lainnya jika memang diperlukan.

   Contoh berikut menetapkan style animasi untuk elemen H1 dengan properti animation:

   h1 { animation: myHeading 5s infinite; }
2. Menetapkan frame dengan @keyframes rule yang menandai adanya state awal (from) dan akhir (to) dari style animasi itu sendiri.

   Berikut @keyframes rule digunakan untuk menandai adanya state awal dan akhir:

   @keyframes myHeading { from { color: red; } to { color: blue; } }

Coba lihat pada kode yang diberikan warna merah, mereka itu adalah nilai-nilai penting yang harus ada:

• myHeading adalah nama dari animasi yang di tunjuk oleh @keyframes rule (menetapkan nama dari keyframes).
• 5s menetapkan banyaknya durasi animasi sebesar 5 detik.
• from dan to digunakan untuk menandai adanya state awal dan akhir.

IE belum mendukung @keyframes rule atau properti animation.

Agar animasi dapat berjalan pada banyak browser, jangan lupa selalu menyertakan prefix: -moz- untuk Firefox, -webkit- untuk Safari dan Chrome, dan -o- untuk Opera - baik pada @keyframes rule dan properti animation.