Membuat Animasi Di Css3
Di CSS3 untuk membuat animasi menjadi mungkin. Animasi di buat atas dua komponen:
- 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; } - 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
danto
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
.