Membuat Animasi dengan Keyframe pada CSS3

Sebuah Animasi pada website sekarang ini adalah bukan hal yang mustahil. Karena dengan adanya fitur baru dari CSS3 dapat membuat website kalian tidak menjadi kaku, melainkan ada variasi gerakan yang dapat dilakukan oleh CSS3. Dahulu sebelum ada CSS3, para developer menggunakan flash untuk gerakan objek atau animasi. Namun sekarang penggunaan flash sudah tidak disarankan bahkan lebih baik ditinggalkan. Karena jika menggunakan flash, website kalian akan jauh lebih berat saat loading halaman serta tidak efisien. Karena kalian jadi harus belajar flash untuk membuat animasi.

Sesuai dengan pembahasan artikel kali ini, kita akan coba belajar bagaimana membuat animasi dengan keyframe pada CSS3. Apa itu keyframe ?. Keyframe itu adalah sebuah fitur baru dari css3 yang biasa digunakan untuk membuat suatu gerakan pada objek html, bisa dibilang ini adalah fungsi untuk membuat animasi dari CSS3. Dengan keyframe ini, nantinya kita akan membuat gerakan tiap gerakan yang kita tentukan pada keyframe tersebut. Sehingga apabila semua gerakan tersebut dijalankan menjadi satu akan tercipta sebuah animasi sederhana.

Untuk membuatnya cukup mudah. Kalian bisa ikuti langkah-langakah berikut ini. Pertama kalian salin contoh code dibawah ini ya.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: gerakan 5s infinite; /* Safari 4.0 – 8.0 */
    animation: gerakan 5s infinite;
}

/* Standard code keyframe*/
@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}
</style>
</head>
<body>
Ini adalah animasi menggunakan keyframe pada CSS3
<div></div>

</body>
</html>

Setelah itu kalian simpan filenya dengan format html. Setelah sudah kalian bisa lihat hasilnya lewat browser. Jika berhasil maka tampilanya akan seperti ini.

Gambar diatas adalah posisi awal. Gambar kotak tersebut berada diatas. Namun karena kita telah memberikan nilai pada keyframe maka akan terjadi perubahan gerakan naik turun sehingga gambarnya seperti ini.

Gerakan tersebut akan mengulang karena kita telah memberikan nilai infinite pada CSS keyframenya.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat animasi dengan keyframe pada CSS3. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *