Pengenalan Dasar CSS Animation

Di zaman sekarang, banyak website yang menggunakan gambar animasi untuk mempercantik tampilannya. Namun seiring kebutuhan akses yang sangat cepat, penggunaan animasi dengan gambar mulai dikurangi. Dalam tutorial ini, kita akan membuat animasi menggunakan CSS, dan tentu saja ini membuat load website lebih cepat dibandingkan menggunakan gambar. Dan yang akan kita buat adalah animasi square-to-circle (mengubah kotak menjadi bulat).

Pengenalan @keyframes dan Animation

Sebelum kita memulai membuat seperti animasi diatas. Kita harus mengenal lebih dulu apa itu @keyframes dan Animation.

Komponen utama dari CSS Animations adalah @keyframes yang merupakan aturan dimana animasi itu dibuat. Dapat diasumsikan bahwa @keyframes pada CSS seperti fungsi pada javascript, dimana didalamnya terdapat tahap-tahap yang dapat kita definisikan dengan style yang berbeda.

Jika @keyframes sudah didefinisikan, maka kita harus memasangnya pada selector CSS agar animasi itu dapat berjalan.

@keyframes

Disinilah kita mendifiniskan bagaimana animasi kita bekerja. @keyframes memiliki beberapa atribut, diantaranya:

1. Nama (disini kita akan menamainya simpleFade)

2. Stages (dari 0% - 100%), from (0%) dan to (100%).

3. CSS Style, dimana kita mengatur style di setiap stages.

Contoh

@keyframes simpleFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

atau

@keyframes simpleFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

atau cara singkatnya seperti:

@keyframes simpleFade {
  to {
    opacity: 0;
  }
}

Ketiga contoh kode diatas, akan membuat elemen bertransisi dari solid ke transparent (dari opacity : 1 ke opacity : 0).

Animation

Animation adalah properti dari CSS yang berfungsi untuk memanggil @keyframes yang sudah didefinisikan sebelumnya. Animasi dapat memiliki banyak atribut:

1. animation-name: nama @keyframes yang sudah dibuat.
2. animation-duration: total durasi animasi berjalan dari awal sampai akhir
3. animation-timing-function: untuk mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
4. animation-delay: lama delay/waktu tunggu sebelum animasi dimulai.
5. animation-iteration-count: berapa kali animasi dijalankan.
6. animation-direction: untuk mengatur arah animasi, bisa dari start ke end ,atau dari end ke start, atau keduanya.
7. animation-fill-mode: menspesifikasikan style apa yang akan diterapkan jika animasi sudah selesai berjalan ( none | forwards | backwards | both ).

Contoh:

.element {
  animation-name: simpleFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

atau cara singkatnya:

.element {
  animation: simpleFade 4s 1s infinite linear alternate;
}

Contoh kode diatas akan menimbulkan efek 'blink', dengan lama waktu tunggu 1 detik, total durasi animasi 4 detik, dengan arah alternate dan animasinya terus berjalan (infinite).

Multiple Animations

Kita dapat menambahkan beberapa animasi dalam satu selector CSS. Katakanlah kita akan menambahkan animasi rotate. Maka hal tersebut dapat ditulis seperti ini:

.element {
  animation: simpleFade4s 1s infinite linear alternate,
             simpleRotate 4s 1s infinite linear alternate;
}

@keyframes simpleFade {
  to {
    opacity: 0;
  }
}

@keyframes simpleRotate{
  to {
    transform: rotate(180deg);
  }
}

Menambahkan Prefiks Vendor

Contoh kode CSS yang sudah ditulis diatas merupakan sebuah draft yang jika kita pasang, pasti tidak akan berjalan. Kenapa? karena kita perlu memasukan prefiks vendor kepada beberapa atribut CSS sesuai dengan target browser agar dapat berjalan. Standar prefiks yang dapat dipakai adalah:

Chrome & Safari: -webkit-

Firefox: -moz-

Opera: -o-

Internet Explorer: -ms-

Sebuah animasi yang sudah ditambahkan prefiks vendor seperti ini:

.element {
    -webkit-animation: simpleFade 4s 1s infinite linear alternate;
    -moz-animation: simpleFade 4s 1s infinite linear alternate;
    -ms-animation: simpleFade 4s 1s infinite linear alternate;
    -o-animation: simpleFade 4s 1s infinite linear alternate;
    animation: simpleFade 4s 1s infinite linear alternate;
}

dan @keyframes yang ditambahkan prefiks vendor seperti ini:

@-webkit-keyframes simpleFade { /* your style */ }
@-moz-keyframes simpleFade { /* your style */ }
@-ms-keyframes simpleFade { /* your style */ }
@-o-keyframes simpleFade { /* your style */ }
@keyframes simpleFade { /* your style */ }

Disini kita menambahkan semua standar vendor prefix agar dapat berjalan disemua browser.

Catatan: untuk kemudahan dalam membaca source code, untuk selanjutnya saya tidak akan menambahkan vendor prefix pada @keyframes dan selector CSS.

Square-to-circle

Sekarang kita akan masuk ke tahap membuat transisi perubahan bentuk elemen. Kita akan membuat total 5 stages dimana setiap stages kita masukan animasi mengubah border-radius, rotate, dan background-color.

Elemen Dasar

Sekarang kita buat elemen dasarnya. Buatlah sebuah elemen div dengan atribut class "animObject".

<div class="animObject"></div>

Lalu tambahkan selector CSS berikut:

div {
  width: 200px;
  height: 200px;
  background-color: coral; 
}

Deklarasi @keyframes

Mari kita deklarasikan sebuah @keyframes. Kita beri nama square-to-circle yang mana ia memiliki 5 stages:

@keyframes square-to-circle {
  0%{}
  25%{}
  50%{}
  75%{}
  100%{}
}

Kita harus menambahkan style apa yang akan digunakan disetiap stages. Pertama, kita pasang style border-radius yang berbeda di setiap stages.

@-webkit-keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
  }
  25%  {
    border-radius:50% 0 0 0;
  }
  50%  {
    border-radius:50% 50% 0 0;
  }
  75%  {
    border-radius:50% 50% 50% 0;
  }
  100% {
    border-radius:50%;
  }

}

Kedua, kita dapat menambahkan background-color yang berbeda juga:

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral; 
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon; 
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
  }
}

Agar lebih menarik, kita juga menambahkan fungsi rotate disetiap stagesnya:

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Memasang Animasi

Setelah kita membuat @keyframes , kita perlu menambahkannya pada selector div:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate;  
}

Pada kode diatas, kita memiliki atribut animation:

1. animation-name : square-to-circle.

2. animation-duration ; 2s.

3. animation-delay : 1s.

4. animation-iteration-count : infinite, ini berarti animasi ini akan terus berjalan.

5. animation-direction : alternate, ini berarti animasi ini akan berjalan dari awal sampai akhir, kemudian dari akhir sampai awal, dan seterusnya.

 Jika kita lihat source code terakhir tanpa vendor prefix, seperti ini:

<style>
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% { 
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

.animObject {
  left: calc(100% - 100px);
  top: calc(100% - 100px);
  margin: 50px;
  width: 200px;
  height: 200px;
  background-color: coral;
  -webkit-animation: square-to-circle 2s 1s infinite alternate; 
  -moz-animation: square-to-circle 2s 1s infinite alternate; 
  -ms-animation: square-to-circle 2s 1s infinite alternate; 
  -o-animation: square-to-circle 2s 1s infinite alternate;  
  animation: square-to-circle 2s 1s infinite alternate; 
}
</style>
<div class="animObject">
</div>

Animasi diatas dapat berjalan di modern browser, hanya saja pada firefox ada sedikit keanehan. Bisa dilihat bahwa hasil rendering dari object pada firefox cukup buruk.

tutplus

Hal ini dapat kita perbaiki dengan menambahkan kode berikut pada selector div.

outline: 1px solid transparent;

Dengan demikian, tampilan pada firefox akan sempurna.

Semoga bermanfaat. Anda bisa mendownload contoh source code terakhir di github.

Sumber : Webdesign Tutplus