CSS3 Animation

Dengan css3 kita bisa membuat animasi tanpa javascript ataupun flash!

Kelebihannya apa?

Yang jelas, kalau website akan menjadi lebih ringan. Fitur animasi ini sudah disupport di semua web browser modern.

Untuk membuat animasi di css3 kamu harus mengenal konsep keyframe terlebih dahulu. Konsep ini hampir sama dengan konsep fps seperti frame per second.

@keyframes

Logika animasi itu adalah pergantian dari obyek A ke obyek B dalam rentan waktu tertentu. Makannya ada konsep 30fps, dll. Artinya ada perpindahan 30 gambar dalam 1 detik.

Sama, dengan @keyframes kita bisa mendefinisikan perpindahan tersebut.

<style> 
@keyframes contoh-animasi {
  from {background-color: #5340ff;}
  to {background-color: #212121;}
}

div#contoh {
  width: 120px;
  height: 120px;
  background-color: yellow;
  animation-name: contoh-animasi;
  animation-duration: 2s;
}
</style>
<div id="contoh"></div>

Keterangan:

• buat @keyframes dengan nama contoh-animasi dengan value warna dari from adalah #5340ff menuju to #212121
• Kemudian panggil contoh-animasi ke dalam div dengan property animation-name
• animation-duration: 2s; untuk menentukan durasi perpindahan dari from ke to selama 2 detik.
• from itu dari 0% sedangkan to 100%

Versi penulisan lain:

<style>
div#contoh2 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: contoh-animasi2;
  animation-duration: 4s;
}

@keyframes contoh-animasi2 {
  0%   {background-color: #5340ff;}
  35%  {background-color: #212121;}
  60%  {background-color: yellow;}
  100% {background-color: orange;}
}
</style>
<div id="contoh2"></div>

Durasi dan delay

Untuk mengatur durasi digunakan properti animation-duration: xs; dimana x adalah durasinya.

Sedangkan untuk mengatur delay gunakan animation-delay: xs; dimana x adalah delay waktunya.

<style> 
div#contoh-3 {
  width: 120px;
  height: 120px;
  background-color: #5340ff;
  position: relative;
  animation-name: contoh-animasi3;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes contoh-animasi3 {
  0%   {background-color:#5340ff; left:0px; top:0px;}
  25%  {background-color:#212121; left:200px; top:0px;}
  50%  {background-color:#fb4b58; left:200px; top:200px;}
  75%  {background-color:#23384e; left:0px; top:200px;}
  100% {background-color:#5340ff; left:0px; top:0px;}
}
</style>
<div id="contoh-3"></div>

Keterangan:

• Total durasi animasi adalah 4s didefinisikan dengan animation-duration
• Delay animasi adalah 2s didefinisikan dengan animation-delay
• Pada @keyframes ditentukan spot tempat dari 0% – 100%. % bisa dikustom sesuka hati.

Mengatur direction (arah)

Untuk mengatur arah pergerakan animasi, menggunakan properti animation-direction, dengan value:

• normal, animasi akan diputar normal (forwards) ke depan seperti yang didefinisikan awal
• reverse, animasi akan diputar kebalikannya, yaitu dari arah belakang ke depan
• alternate, animasi diputar ke depan kemudian ke belakang
• alternate-reverse, animasi diputar ke belakang kemudian ke depan

div#contoh-3 {
  width: 120px;
  height: 120px;
  background-color: #5340ff;
  position: relative;
  animation-name: contoh-animasi3;
  animation-duration: 4s;
  animation-delay: 2s;
 animation-direction:reverse;
}

Jenis pergerakan speed curve

Secara umum, jenis pergerakan obyek didefinisikan dengan properti animation-timing-function. Valuenya: ease, linear, ease-in, ease-out, ease-in-out.

<style> 
div.kotak {
  color:white;
  width: 150px;
  height: 30px;
  margin-bottom:5px;
  padding:10px;
  background-color: #5340ff;
  font-weight: bold;
  position: relative;
  animation: animasi5 5s infinite;
}

#kotak1 {animation-timing-function: linear;}
#kotak2 {animation-timing-function: ease;}
#kotak3 {animation-timing-function: ease-in;}
#kotak4 {animation-timing-function: ease-out;}
#kotak5 {animation-timing-function: ease-in-out;}

@keyframes animasi5 {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
<div id="kotak1" class="kotak">linear</div>
<div id="kotak2" class="kotak">ease</div>
<div id="kotak3" class="kotak">ease-in</div>
<div id="kotak4" class="kotak">ease-out</div>
<div id="kotak5" class="kotak">ease-in-out</div>

Pengulangan

Untuk mengatur berapa kali animasi akan diputar, kita menggunakan animation-iteration-count. Jika 3x diputar maka ditulis: animation-iteration-count:3;

Jika diputar unlimited maka valuenya animation-iteration-count: infinite;

Shorthand

Untuk menulis semua kodenya menjadi satu maka ditulis dengan urutan:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Contoh:

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

dapat ditulis:

div {animasi 2s linear 1s infinite alternate;}

Property CSS3 Animation

Berikut ini adalah tabel daftar property animation css3:

Property	Keterangan
animation	Syntax singkat gabungan (shorthand) animation
@keyframes	Menentukan nilai spesifik (point) pergerakan animasi
animation-timing-function	Menentukan jenis pergerakan animasi
animation-play-state	Menentukan kapan animasi akan dipause atau diiplay
animation-name	Nama animasi
animation-iteration-count	Jumlah iterasi / pengulangan animasi
animation-fill-mode	Menentukan efek setelah / sebelum animasi diplay
animation-duration	Durasi waktu animasi
animation-direction	Arah animasi
animation-delay	Menentukan waktu delay animasi