Cara membuat animasi dengan CSS

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 default
• reverse  Animasi diputar dalam arah terbalik (mundur)
• alternate  Animasi diputar terlebih dahulu, lalu mundur
• alternate-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 akhir
• ease-in Menentukan animasi dengan awal yang lambat
• ease-out Menentukan animasi dengan akhir yang lambat
• ease-in-out Menentukan animasi dengan awal dan akhir yang lambat
• cubic-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 dijalankan
• forwards  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-delay
• both  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