Home / Animasi / Web Design / Cara Membuat Animasi Sederhana dengan CSS 3 Dasar

Cara Membuat Animasi Sederhana dengan CSS 3 Dasar

Membuat Animasi dengan CSS: Saat browsing ke halaman website tetangga, disana dijumpai animasi yang membuat tampak halaman tersebut lebih hidup dan tentu saja menunjukkan bahwa sang admin ingin memberikan kesan yang lebih ke para pembaca, memberi kesan yang lebih interaktif.
Saat ini sudah banyak halaman website yang memakai animasi untuk memperindah tampilan, animasi sendiri bisa dibuat dengan teknik SVG, GIF, WebGL, Video dan beberapa teknik lainnya.
Dalam kesempatan kali ini Basileus7 akan share tentang teknik cara membuat animasi dengan CSS, teknik membuat animasi dengan css adalah sebuah cara untuk menambahkan animasi pada halaman web dengan performa yang lebih baik dari pada teknik yang telah disebutkan diatas. Teknik ini menjadi populer karena semakin mendapat dukungan dari browser-browser papan atas.
Dalam tutorial ini kita tidak langsung terjun membuat animasi, melainkan akan mempelajari dulu dasar-dasar dalam cara membuat animasi dengan css. Setelah selesai dengan pembahasan dasar, kita akan membuat contoh animasi sederhana dengan mengubah sebuah kotak menjadi sebuah lingkaran dan akan mengembalikannya menjadi kotak kembali.
Berikut adalah gambar dari hasil akhir animasi yang telah selesai dibuat :

@keyframes dan Animation Pada CSS

Dalam CSS terdapat komponen @keyframes, komponen ini adalah komponen utama dari pembuatan animasi, dalam komponen ini kita bisa menentukan aturan-aturan CSS untuk membuat sebuah animasi.
Kita bisa membayangkan @keyframes sebagai tempat dari beberapa tahapan dan merangkainya sebagai timeline pada animasi. Di dalam @keyframes yang dibuat kita bisa menentukan style yang berbeda pada masing-masing tahap. Style bisa berupa warna, bentuk dan bahkan arah pergerakan.

Mengenal Komponen @keyframes CSS

Dalam Komponen ini kita bisa mengatur dari tahapan-tahapan animasi yang telah dibuat. Sebagai contoh dalam penggunaan komponen @keyframes, mari kita lihat skrip berikut.
Skrip CSS:
@keyframes basileus7fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


Dalam skrip diatas terdapat tulisan basileus7fade, tulisan ini merupakan nama dari komponen @keyframes, selain itu terdapat dua tahap yaitu tahap animasi di 0% dan 100%, lihat pada kedua tahap tersebut telah ditentukan nilai opacity yang berbeda. Pada skrip ini akan memberikan efek transisi terhadap opacity dari sebuah elemen, dari opacity: 1 menjadi opacity: 0.

Mengenal Atribut Animation CSS

Setelah kita menentukan nama dan tahapan-tahapan pada @keyframe, lagkah selanjutnya yang harus dilakukan adalah memanggilnya dan meletakkannya dalam sebuah selektor CSS. Cara untuk memanggilnya adalah dengan menggunakan atribute animation.
Atribut animation memiliki beberapa properti sebagai berikut:
  • animation-name: nama @keyframes.
  • animation-duration: total durasi animasi.
  • animation-timing-function: kecepatan pada animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay: durasi tunda animasi.
  • animation-iteration-count: jumlah perulangan animasi.
  • animation-direction: pergerakan arah animasi.
  • animation-fill-mode: style ditentukan ke elemen ketika animasi selesai( none | forwards | backwards | both ).
Sebagai contoh, mari kita lihat skrip berikut.
skrip CSS :
.element {
  animation-name: basileus7fade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
Pada skrip diatas kita bisa mengetahui bahwa animasi yang dipanggil bernama basileus7 dengan durasi selama 4 detik, delay awal selama 1 detik, tidak ada batasan dalam perulangan dan dengan arah yang berbalik.

Mengenal Awalan Vendor CSS

Agar skrip dapat didukung oleh browser-browser populer seperti Chrome, Firefox atau Opera, maka kita harus menambahkan awalan khusus, awalan-awalan tersebut adalah:
  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-
Dengan menerapkan awalan vendor, maka skrip untuk pemanggilan animasi supaya compatibel dengan browser Chrome akan menjadi seperti ini.
- Skrip CSS
.element {
  -webkit-animation-name: basileus7fade;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: alternate;
}
Sedangkan skrip untuk untuk @keyframe akan menjadi seperti ini.
- Skrip CSS
@-webkit-keyframes basileus7fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Perhatikan bahwa ada tambahan berupa -webkit-, Jika anda ingin mengetahui lebih lanjut tentang awalan vendor, silahkan kunjungi website http://css3please.com/.

Cara Membuat Banyak Animasi CSS 3

Kita bisa membuat banyak animasi dan diterapkan dalam satu elemen, caranya dengan menambahkan tanda koma , diakhir baris skrip. Misal kita ingin menambahkan efek rotasi pada animasi basileus7, kita dapat melakukannya dengan membuat @keyframes baru dan kemudian mengaitkannya ke dalam element kita, perhatikan skrip dibawah ini:
Skrip CSS:
.element {
  animation: basileus7fade 4s 1s infinite linear alternate,
             basileus7Rotate 4s 1s infinite linear alternate;
}
@keyframes basileus7fade{
  to {
    opacity: 0;
  }
}
@keyframes basileusRotate {
  to {
    transform: rotate(180deg);
  }
}

Cara Membuat Animasi dengan CSS 3: Merubah Kotak menjadi Lingkaran
Setelah mempelajari dasar-dasar dalam pembuatan animasi dalam CSS3, marilah kita membuat animasi secara sederhana dengan mengubah elemen kotak menjadi lingkaran dan setelah itu kita balik dari lingkaran menjadi kotak kembali. Karena didalam tutorial ini menggunakan browser chrome sebagai browser, maka akan diberikan awalan –webkit-.
Pertama yang kita lakukan adalah menentukan berapa banyak tahapan dalam animasi yang akan kita buat, misal dalam contoh ini kita akan membuat lima tahapan dan masing-masing tahapan akan kita beri style berupa perubahan bentuk ke lingkaran dengan memanfaatkan atribut CSS yaitu border-radius.
Agar terlihat menarik, kita juga akan menambahkan efek berputar dan perubahan warna background elemen. Sebelum membuat skrip CSS, kita akan buat dulu halaman HTML dengan struktur umum halaman HTML.

Membuat Elemen Animasi

Kita akan menggunakan struktur HTML dibawah ini, jika anda ingin mengetahui lebih lanjut tentang pembahasan Struktur umum HTML silahkan kunjungi artikel Pengenalan HTML: Struktur Umum.

Skrip Struktur Umum

Skrip HTML :

<!doctype html>
 
<html lang="en">
   <head>
      <meta charset="utf-8">
  <title>Contoh Dasar Animasi CSS3 - Basileus7</title>
 <style>
        <!-- Penempatan Style -->
 </style>
</head>
<body>
    <!-- elemen yang akan diberi efek animasi -->
    <div></div>
 
</body>
</html>
Pada elemen body cukup kita berikan 1 tag <div> berserta penutupnya </div> tanpa ada isi didalamnya, pada tag <div> ini nantinya akan kita terapkan animasi. Selanjutnya berikan style awal berupa ukuran dan warna pada elemen div ini dengan menambahkan skrip dibawah ini diantara tag style.
Skrip CSS :
div {
 width: 200px;
 height: 200px;
 background-color: coral;
 position:absolute !important;
 top:calc(50% - 100px);
 left:calc(50% - 100px);
}

Membuat @keyframe

Selanjutnya kita membuat @keyframe dan memberi nama kotak-ke-lingkaran, kita akan memberinya lima tahapan sesuai rencana sebelumnya. Disetiap tahapan akan memiliki efek perubahan bentuk,warna dan arah rotasi, sehingga skrip menjadi seperti berikut:
Skrip CSS :
@-webkit-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);
  }
}

Menerapkan Animasi

Setelah pembuatan @keyframe, yang kita lakukan selanjutnya adalah memanggil animasi tersebut dan meletakkannya pada elemen <div> yang sudah kita buat sebelumnya, untuk itu kita perlu menambahkan skrip berikut ini kedalam selektor div {}.
Skrip CSS :
-webkit-animation-name: kotak-ke-lingkaran; 
-webkit-animation-duration:  5s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;

Untuk FULL SCRIP-nya , sebagai berikut :
<!doctype html>
 
<html lang="en">
   <head>
      <meta charset="utf-8">
  <title>Contoh Dasar Animasi CSS3 - Basieus7</title>
 <style>
 body {
   background:azure;
   font-size:15px;
 }
 div {
     width: 200px;
     height: 200px;
     background-color: coral;
     position:absolute !important;
     top:calc(50% - 100px);
     left:calc(50% - 100px);
     -webkit-animation-name: kotak-ke-lingkaran; 
     -webkit-animation-duration:  5s;
     -webkit-animation-delay: 1s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction: alternate;
 }
 
 
 @-webkit-keyframes kotak-ke-lingkaran {
   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);
   }
 }
 </style>
</head>
<body>
   
    <div></div>
 
</body>
</html>

Jalankan Skrip diatas pada browser Chrome atau browser Safari, maka akan muncul animasi berupa perubahan warna, bentuk dan pergerakan (rotasi) pada elemen <div> yang sudah kita buat sebelumnya.

Sekian tutorial untuk membuat animasi sederhana kali ini, Thanks..
#NyontekWebSebelah
Cara Membuat Animasi Sederhana dengan CSS 3 Dasar Cara Membuat Animasi Sederhana dengan CSS 3 Dasar Reviewed by _ on 22.8.17 Rating: 5

No comments

Subscribe to: Post Comments (Atom)