Cara membuat animasi di HTML dengan CSS3

Selamat Pagi, Kali ini saya akan berbagi ilmu cara membuat animasi di HTML dengan CSS3. Cara kerja dari animasi ini adalah dengan menganti dari tampilan satu ke tampilan lain pada suatu elemen secara bertahap.

Contoh:

1. Animasi dari warna merah ke biru
AAAA

Cara membuatnya langkah pertama anda harus mengetik kode @-webkit-keyframes namaanimasi{} (untuk chrome) dan @-moz-keyframes namaanimasi{} (untuk Firefox)diantara tag<style> dan </style> , lalu isi kurung {} dengan kode animasi yang diinginkan. misalkan kita ingin membuat animasi suatu elemen menjorok ke arah kanan kodenya seperti ini:

from{margin-left:0px} to{margin-left:50px;}

Contoh penulisan lengkap:
<style>
@-webkit-keframes animasisaya{from{margin-left:0px} to{margin-left:50px;}}
</style>
keterangan:
- Tulisan Bewarna merah adalah kode yang support di beberapa browser tertentu, -webkit- untuk chrome dan -moz-untuk firefox , gunakan keduanya agar hampir semua browser support. Contoh:
<style>
@-webkit-keframes animasisaya{from{margin-left:0px} to{margin-left:50px;}}
@-moz-keframes animasisaya{from{margin-left:0px} to{margin-left:50px;}} 
 </style>
-tulisan bewarna hijau adalah nama animasi , namai sesuai selera anda.

 lalu buat sebuah style elemen yang akan diberi animasi, contoh :

<style>
#animasi{width:100px;height:100px;background:red;-moz-animation:animasisaya 4s;-webkit-animation:animasisaya 4s;
}
</style> 

- Tulisan yang berwarna hijau sesuaikan dengan nama animasi yang telah dibuat sebelumnya.
- Tulisan yang berwarna biru adalah waktu lamanya animasi berlangsung (sekon).
- Tulisan yang berwarna ungu adalah nama elemen yang diberi animasime

Lalu sentuhan akhir adalah  menyisipkan elemen yang diberi animasi di HTML. caranya ketik kode seperti ini di <body>

<div id="animasi">ANIMASI</div>

Tulisan yang berwarna ungu sesuaikan dengan nama elemen yang sudah diberi animasi sebelumnya.

Maka hasil akhir akan seperti ini:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD> 
<BODY>
<style>
@-webkit-keframes animasisaya{from{margin-left:0px} to{margin-left:50px;}}
@-moz-keframes animasisaya{from{margin-left:0px} to{margin-left:50px;}}
#animasi{width:100px;height:100px;background:red;-moz-animation:animasisaya 4s;-webkit-animation:animasisaya 4s;
}
</style> 

<div id="animasi">ANIMASI</div>
</BODY>
</HTML>

 Note: kode HTML diatas adalah animasi yang membuat elemen menjorok ke kanan.

Lalu Beberapa Trik-trik CSS3 animasi:

Mengatur berapa kali animasi berjalan

 Kode animation-iteration-count: 3 berguna untuk mengatur berapa kali animasi berjalan, misalkan angkanya 3 maka akan 3 kali berjalan. jangan lupa tambahkan kode -moz- dan -webkit- agar mendukung web browser chrome dan firefox.

 Contoh:
 #animasi {
width:100px;
height:100px;
background:green;
-webkit-animation-iteration-count: 3
-moz-animation-iteration-count:3
}

Note : anda bisa mengganti angka dengan "infinite" untuk membuat animasi berjalan tanpa henti.

Membuat lebih banyak tahapan animasi.

 membuat animasi lebih banyak perubahan gaya, tidak seperti sebelumnya yang hanya dua saja, kali ini bisa banyak dengan cara menggunakan persentase, misal saat mencapai 25% elemen menjorok ke kanan, 50% elemen berputar, dan 100% elemen kembali semula.

Kodenya:

@keyframes bertahap{
0%{margin-left:50px;}
50%{transform:rotate(45deg)}
100%{margin-left:0px;transform:rotate(360deg);)}
}
Note! tulisan yang berwarna merah harus ditambahkan properti -webkit- (Chrome) -moz (mozilla) dan -ms- untuk IE9 dibelakang tulisan. contoh : @-webkit-keyframes bertahap{} atau gunakan semuanya agar semua browser dapat membacanya.

Hasilnya:


Contoh lain:

Animasi SCALE() layaknya animasi  window di windows 7 ke atas.

<style>
@keyframes scale{
from{
-ms-transform: scale(0.25,0.25); 
    -webkit-transform: scale(0.25,0.25); 
    transform: scale(0.25,0.25); 
}
to{
-ms-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
}}
@-moz-keyframes scale{
from{
-ms-transform: scale(0.25,0.25); 
    -webkit-transform: scale(0.25,0.25); 
    transform: scale(0.25,0.25); 
}
to{
-ms-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
}}
#animasi{
width:100px;
height:100px;
color:red;
-webkit-animation:scale 0.25s;
-moz-animation:scale 0.25s;
}
</style>
<div id='animasi'>animasi scale</div>

Keterangan:
  • dalam kurung from{} ada kode scale(0.25,0.25) angka tersebut menunjukan ukuran jendela pada saat animasi tahap pertama yaitu ukuran elemen hanya 25% dari ukuran sebenarnya, misal 100px menjadi 25px.
  • dalam kurung to{} ada kode scale(1,1) angka tersebut menunjukan jika animasi mencapai tahap akhir maka ukuran elemen kembali 100%.
hasil:

ABCDEFGHIJKLMN


Sekian dan terimakasih telah membaca. Jika ada kesalahan kata atau kurang mengerti dengan kata kata saya mohon maaf , karena blog ini dalam pengembangan saya harap anda melaporkannya di komentar.



 

Komentar

Posting Komentar