Animasi foto genit dengan CSS keyframe

Jika sebelumnya kita telah berhasil membuat animasi foto menjadi berkedip dengan photoshop. Sekarang kita akan mencoba hal yang sama, namun menggunakan tools berbeda, yaitu menggunakan CSS animasi @keyframe.

Sebenarnya konsep dasar dari pembuatan animasi frame by frame, entah menggunakan tools apapun (flash, photoshop) bahkan CSS3 memiliki pola yang sama. Yaitu menggunakan dua atau lebih gambar berbeda dengan dibungkus oleh sebuah bingkai virtual, dimana bingkai ini hanya dapat memuat satu gambar dan akan memuat gambar lain berdasarkan waktu yang telah ditentukan.

Animasi dengan css ini hampir mirip dengan css sprite yang beberapa waktu lalu kita bahas. Bedanya jika css sprite menggunakan properti background-position untuk menggeser gambar, sedangkan yang hendak kita buat menggunakan properti @keyframe dan kelebihannya adalah animasi ini akan terus berjalan tanpa menunggu kursor mouse melewatinya (hover).

Sengaja saya menggunakan foto cewek cantik, sebagai obyek uji coba, sebab saya tau sebuah obyek yang sangat menarik akan membangkitkan semangat belajar yang tinggi :D ->  :hammer

Ada dua foto sebagai modal kita dalam tutorial ini. Foto pertama adalah foto normal sedangkan foto kedua merupakan foto yang nampak berkedip yang sudah saya edit menggunakan photoshop

Lihat Demo

Pertama

Buat terlebih dahulu kerangka sederhana html dengan mengikutkan dua gambar yang akan kita animasikan di atas

<div class="bungkus">
  <img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulAuwuL3G9j_1IDego7VL-w2EnpY-Esv9y1WP9lSvwHMqQTSlxPXiT-RGuc2SCBpoBnyC1Kq03PEN6bXqpTPT95Ktktipc7Onwu_nJBtRPChXdI_wbggtB8cFLQJP2CQONTBv3cY9BQw/s1600/css-animasi-klikedukasi2.jpg" />
  <img class="kedip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6U3yv0uOlif-s8EDBeYP0_35ETT9DcFhN7jnKiuYmUUzfSTHTSkPLBsWIJFFENeuRVzpAwh0LRF2oBp2spd5cGRve52M-8BM83iX59Vu3Id8aq_kKFMfjNT2eqR-P-bc-KUiCNyt980/s1600/css-animasi-klikedukasi1.jpg" />
</div>

Dalam kode html tersebut terlihat bahwa saya memiliki class bungkus yang akan membungkus dua gambar yang memiliki class normal dan kedip

Kedua

Berdasarkan 3 class yang telah kita buat, sekarang saatnya untuk memberi sentuhan lewat css. Deklarasikan posisi, ukuran lebar dan tinggi dari pembungkus

.bungkus {
  position: relative;
  margin: 30px;
  height: 150px;
  width: 150px;
  float: left;
}

Ketiga

Ada beberapa nilai yang sama antara class normal dan kedip, maka kita dapat menuliskan satu kode yang yang berefek pada dua class

.normal, .kedip {
  border: 5px solid #fff;
  border-radius: 3px;
  height: 150px;
  margin: 20px;
  position: absolute;
  width: 150px;

  /* memberi bayangan pada frame gambar */
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
          box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

Keempat

Membuat keyframe dan mengatur nilai z-index sesuai dengan yang kita kehendaki. Dan efek mata berkedip ini sebenarnya adalah efek dari pergantian nilai z-index yang sangat cepat, saat z-index bernilai 1 gambar kedip akan berada di atas menutupi gambar normal. Begitu juga sebaliknya saat z-index bernilai -1.

z-index sendiri itu apa?

Fungsi utamanya adalah mengatur element mana yang diletakan di dapan atau di balakang. Dengan value-nya adalah bilangan riil, dimana suatu element jika memiliki nilai z-index lebih besar dari pada element lain maka dia akan berada paling depan, jika digabung efeknya dia menutupi element lainnya. Nah itulah yang kita manfaatkan dalam animasi ini.

Hal yang perlu diingat bahwa css keyframe ini belum sepenuhnya di dukung oleh semua browser, hanya browser dengan versi tertentu saja yang dapat menjalankan kode ini.

/* Safari & Chrome */
@-webkit-keyframes cantik {
 0%   {z-index:-1;}
 25%  {z-index: 1;}
 32%  {z-index: 1;}
 75%  {z-index: -1;}
 100% {z-index: -1;}
}

/* Firefox 5+ */
@-moz-keyframes cantik {
 0%   {z-index:-1;}
 25%  {z-index: 1;}
 32%  {z-index: 1;}
 75%  {z-index: -1;}
 100% {z-index: -1;}
}

/* IE 10+ */
@-ms-keyframes cantik {
 0%   {z-index:-1;}
 25%  {z-index: 1;}
 32%  {z-index: 1;}
 75%  {z-index: -1;}
 100% {z-index: -1;}
}

/* Opera 12+ */
@-o-keyframes cantik {
 0%   {z-index:-1;}
 25%  {z-index: 1;}
 32%  {z-index: 1;}
 75%  {z-index: -1;}
 100% {z-index: -1;}
}

/* Standar W3C */
@keyframes cantik {
 0%   {z-index:-1;}
 25%  {z-index: 1;}
 32%  {z-index: 1;}
 75%  {z-index: -1;}
 100% {z-index: -1;}
}

Kelima

Panggil keyframe yang sudah kita buat. Saya mengenakan animasi ini pada salah satu class saja yaitu class kedip. Jadi sebenarnya class yang lain tetep diam, yang bergerak hanya si kedip :D

.bungkus .kedip {
 -webkit-animation: cantik ease-in-out 2s infinite alternate;
     -moz-animation: cantik ease-in-out 2s infinite alternate;
      -ms-animation: cantik ease-in-out 2s infinite alternate;
       -o-animation: cantik ease-in-out 2s infinite alternate;
  animation: cantik ease-in-out 2s infinite alternate;
}