Cara membuat animasi dengan CSS
Pada CSS3 terdapat fitur baru yaitu properti animation. Animasi CSS3 selangkah lebih maju karena terd
Kegunaan CSS animasi
Pada CSS3 terdapat fitur baru yaitu properti animation
. Animasi CSS3 selangkah lebih maju karena terdapat keyframe yang memungkinkan Anda untuk menentukan perubahan pada properti CSS dengan seiring waktu. Anda harus menentukan setidaknya dua properti yaitu: properti animation-name
dan animation-duration
(lebih besar dari 0), untuk membuat animasi berjalan.
Menentukan @keyframes
@keyframe digunakan untuk menentukan nilai properti untuk animasi itu sendiri secara bertahap, dan akan berubah dari gaya saat ini ke gaya baru pada waktu tertentu. Anda bisa memilih keyframe yang dimulai dengan persentase (%
), kata kunci from
(sama dengan 0%) atau to
(sama dengan 100%).
Persentase mewakili persen durasi untuk animasi, yang berarti:
- 0% mewakili titik awal animasi
- 100% mewakili titik akhir
- 50% mewakili titik tengah dan seterusnya
@keyframes {
from {background-color: blue;}
to {background-color: yellow;}
}
Pada contoh diatas Animasi belum berjalan, kita akan perbaiki pada contoh-contoh berikutnya.
Animation-name
Properti animation-name
digunakan untuk membuat nama animasi itu sendiri yang akan dikaitkan pada @keyframes. Pada contoh dibawah ini kita menggunakan nama animasi berubah lalu kita kaitkan pada @keyframes. Namanya bebas asal diawali dengan huruf dan jangan menggunakan simbol-simbol yang sulit dibaca.
#box {
animation-name: berubah;
}
@keyframes berubah {
from {background-color: blue;}
to {background-color: yellow;}
}
Pada contoh diatas Animasi belum berjalan, kita akan perbaiki pada contoh berikutnya.
Animation-duration
Properti animation-duration
digunakan untuk memberikan durasi pada animasi. Sebagai contoh jika Anda memberikan durasi 3s (s yang berarti second) itu berarti Anda memberikan durasi 3detik, atau jika Anda memberikan durasi 2.5s itu berarti Anda memberikan durasi 2,5 detik.
#box {
animation-name: berubah;
animation-duration: 3s;
}
@keyframes berubah {
from {background-color: blue;}
to {background-color: yellow;}
}
Pada contoh diatas kita menggunakan animasi dengan kata kunci from
(sama dengan 0%) atau to
(sama dengan 100%). Dan Anda bisa menghasilkan animasi yang lebih spesifik pada setiap perubahan dengan patokan persentase (%
).
#box {
animation-name: berubah;
animation-duration: 3s;
}
@keyframes berubah {
0% {background-color: blue;}
25% {background-color: red;}
50% {background-color: yellow;}
75% {background-color: green;}
100% {background-color: blue;}
}
Animation-delay
Properti animation-delay
digunakan untuk menunda waktu animasi yang akan diputar dengan waktu yang telah ditentukan.
#box {
animation-name: berubah;
animation-duration: 3s;
animation-delay: 2s;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Nilai negatif juga diperbolehkan. Jika menggunakan nilai negatif, animasi akan mulai seolah-olah sudah diputar selama N detik. Pada contoh berikut, animasi akan mulai seolah-olah sudah diputar selama 2 detik:
#box {
animation-name: berubah;
animation-duration: 3s;
animation-delay: -2s;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Animation-iteration-count
Properti animation-iteration-count
digunakan untuk menentukan berapa kali animasi harus dijalankan.
#box {
animation-name: berubah;
animation-duration: 3s;
animation-iteration-count: 3;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Anda juga bisa membuat sebuah animasi berjalan tak terbatas atau infinite. Berikut contohnya:
#box {
animation-name: berubah;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Animation-direction
Properti animation-direction
digunakan untuk mengatur apakah arah animasi harus diputar ke depan, belakang atau dalam siklus alternatif.
Properti arah animasi dapat memiliki nilai berikut:
normal
Animasi diputar seperti biasa (ke depan). Ini standar atau defaultreverse
Animasi diputar dalam arah terbalik (mundur)alternate
Animasi diputar terlebih dahulu, lalu munduralternate-reverse
Animasi diputar mundur lebih dulu, lalu maju
#box {
animation-name: berubah;
animation-duration: 3s;
animation-direction: reverse;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Anda juga bisa menggunakan nilai alternate untuk membuat animasi diputar ke depan, lalu mundur. Berikut contohnya:
#box {
animation-name: berubah;
animation-duration: 3s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Anda juga bisa menggunakan nilai alternate-reverse untuk membuat animasi diputar mundur terlebih dahulu, lalu maju ke depan. Berikut contohnya:
#box {
animation-name: berubah;
animation-duration: 3s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes berubah {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Animation-timing-function
Properti animation-timing-function
digunakan untuk menentukan kurva kecepatan pada sebuah animasi.
Nilai untuk properti animation-timing-function dapat memiliki nilai-nilai berikut:
ease
Menentukan animasi dengan awal yang lambat, lalu cepat, lalu akhiri perlahan (ini default)linear
Menentukan animasi dengan kecepatan yang sama dari awal hingga akhirease-in
Menentukan animasi dengan awal yang lambatease-out
Menentukan animasi dengan akhir yang lambatease-in-out
Menentukan animasi dengan awal dan akhir yang lambatcubic-bezier(n,n,n,n)
Memungkinkan Anda menentukan nilai Anda sendiri dalam fungsi kubik-bezier
div {
animation-name: bergerak;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes bergerak {
from {left: 0px;}
to {left: 300px;}
}
#linear {animation-timing-function: linear;}
#ease {animation-timing-function: ease;}
#ease-in {animation-timing-function: ease-in;}
#ease-out {animation-timing-function: ease-out;}
#ease-in-out {animation-timing-function: ease-in-out;}
Animation-fill-mode
Animasi CSS tidak memengaruhi suatu elemen sebelum keyframe pertama dimainkan atau setelah keyframe terakhir dimainkan. Properti animation-fill-mode
dapat mengesampingkan perilaku ini.
Properti animation-fill-mode menentukan gaya untuk elemen target ketika animasi tidak bermain (sebelum dimulai, setelah itu berakhir, atau keduanya). Properti animation-fill-mode dapat memiliki nilai-nilai berikut:
none
Nilai standar. Animasi tidak akan menerapkan gaya apa pun pada elemen sebelum atau setelah dijalankanforwards
Elemen akan mempertahankan nilai style yang diatur oleh keyframe terakhir (tergantung pada animation-direction dan animation-iteration-count)backwards
Elemen akan mendapatkan nilai gaya yang diatur oleh keyframe pertama (tergantung pada animation-direction), dan mempertahankan ini selama periode penundaan animasi atau animation-delayboth
Animasi akan mengikuti aturan untuk maju dan mundur, memperluas properti animasi di kedua arah
#box {
animation-name: bergerak;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes bergerak {
from {left: 0px;}
to {left: 200px; background-color: red;}
}
Pada contoh dibawah ini sebuah id box mendapatkan nilai gaya yang ditetapkan oleh keyframe pertama sebelum animasi dimulai (selama periode penundaan animasi):
#box {
animation-name: bergerak;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes bergerak {
from {left: 0px;}
to {left: 200px; background-color: red;}
}
Pada contoh dibawah ini sebuah id box mendapatkan nilai gaya yang ditetapkan oleh keyframe pertama sebelum animasi dimulai, dan mempertahanlan nilai gaya dari keyframe terakhir ketika animasi selesai:
#box {
animation-name: bergerak;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes bergerak {
from {left: 0px; background-color: orange;}
to {left: 200px; background-color: red;}
}
Animation shorthand
Dengan animation shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti animation-* dalam satu properti tunggal.
Untuk menggunakan animation-* shorthand Anda cukup menggunakan properti animation
. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti menggunakan animation-* individu.
Properti animation-* shorthand berlaku untuk animation-* dibawah ini:
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
#box {
animation: bergerak 5s linear 2s infinite alternate;
}
@keyframes bergerak {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: red; left:200px; top:0px;}
50% {background-color: yellow; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: blue; left:0px; top:0px;}
}
Daftar properti animation
Properti | Kegunaanya |
---|---|
@keyframes | Mengatur kerangka animasi |
animation | Mengatur semua properti animation dalam satu deklarasi |
animation-delay | Mengatur penundaan untuk dimulainya animasi |
animation-direction | Mengatur apakah animasi harus diputar maju, mundur atau dalam siklus alternatif |
animation-duration | Mengatur berapa lama waktu animasi yang diperlukan untuk menyelesaikan satu siklus |
animation-fill-mode | Mengatur gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya) |
animation-iteration-count | Mengatur berapa kali animasi harus dimainkan |
animation-name | Mengatur nama animasi pada @keyframes |
animation-play-state | Mengatur apakah animasi sedang berjalan atau dihentikan sementara |
animation-timing-function | Mengatur kurva kecepatan animasi |