CSS3 Animasi

CSS3 Animasi memungkinkan animasi sebagian besar elemen HTML tanpa menggunakan JavaScript atau Flash.

Browser dukungan untuk Animasi

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

CSS3 Animasi

Apa itu Animasi CSS3 ?

Sebuah Animasi yang memungkinkan elemen berangsur-angsur berubah dari satu style ke style lainnya.
Anda dapat mengubah properti CSS sebanyak yang Anda inginkan.
Untuk menggunakan animasi CSS3, Anda harus terlebih dahulu menentukan beberapa Keyframes untuk animasi.

Aturan @keyframes

Saat Anda menentukan style CSS di dalam aturan @keyframes, animasi secara bertahap akan berubah dari style yang telah ada ke style baru pada waktu tertentu.
Agar animasi berfungsi, Anda harus mengikat animasi ke suatu elemen.

Berikut contoh mengikat animasi "example" ke elemen <div>. Animasi akan berlangsung selama 4 detik, dan secara bertahap akan mengubah warna latar belakang elemen <div> dari "red" menjadi "yellow" :

Example :
 /* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Catatan : Jika properti durasi animasi tidak ditentukan, animasi tidak akan berpengaruh, karena nilai defaultnya adalah 0.

Dalam contoh di atas kita telah menentukan kapan style akan berubah dengan menggunakan kata kunci "from" dan "to" (yang mewakili 0% (start) dan 100% (complete)).

Dimungkinkan juga untuk menggunakan persen (%). Dengan menggunakan persen, Anda dapat menambahkan perubahan style/gaya sebanyak yang Anda suka.

Contoh berikut akan mengubah warna latar belakang elemen <div> saat animasi complete di 25%, 50%, dan lagi ketika animasi 100% complete :

Example :
/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Contoh berikut akan mengubah warna latar belakang dan posisi elemen <div> saat animasi 25%, 50% complete, dan sekali lagi ketika animasi 100% complete :

Example :
/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Delay Animation

Properti animasi-delay menentukan penundaan untuk memulai animasi.
Contoh berikut memiliki jeda 2 detik sebelum memulai animasi :

Example :
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

# Setel berapa kali sebuah animasi harus dijalankan

Properti animation-iteration-count menentukan berapa kali animasi harus dijalankan.

Contoh berikut akan menjalankan animasi 3 kali sebelum berhenti :

Example :
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

Contoh berikut menggunakan nilai "infinite" untuk membuat animasi berjalan seterusnya :

Example :
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

# Menjalankan Animasi dalam Arah Terbalik atau Alternate Cycles

Properti animation-direction digunakan untuk membiarkan animasi berjalan dalam arah terbalik atau (Alternate Cycle) siklus alternatif.
Contoh berikut akan menjalankan animasi dalam arah terbalik :

Example :
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}

Contoh berikut menggunakan nilai "alternate" untuk membuat animasi pertama berjalan maju, lalu mundur, lalu maju :

Example :
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

# Menentukan Kecepatan Curve pada Animasi

Properti animation-timing-function menentukan kecepatan Curve animasi.
Properti animation-timing-function dapat memiliki nilai-nilai berikut :
  • ease - menentukan animasi dengan awal yang lambat, lalu cepat, lalu pada akhirnya perlahan (ini default)
  • linear - menentukan animasi dengan kecepatan yang sama dari awal hingga akhir
  • easy-in - menentukan animasi dengan awal yang lambat
  • easy-out - menentukan animasi dengan akhir yang lambat
  • easy-in-out - menentukan animasi dengan awal dan akhir yang lambat
  • cubic-bezier (n, n, n, n) - memungkinkan Anda menentukan nilai Anda sendiri dalam fungsi cubic-bezier

Contoh berikut menunjukkan beberapa speed curves berbeda yang dapat digunakan :

Example :
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

# Animation Shorthand Property

Contoh di bawah ini menggunakan enam properti animasi :

Example :
div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Efek animasi yang sama seperti di atas dapat dicapai dengan menggunakan Animation Shorthand Property :

Example :
div {
    animation: example 5s linear 2s infinite alternate;
}