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 kalau memang diperlukan.

   Contoh berikut memutuskan 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 selesai (to) dari style animasi itu sendiri.

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

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

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

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

IE belum mendukung @keyframes rule atau properti animation.

Agar animasi sanggup 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.