Membuat Animasi Element Bergerak dengan @Keyframe pada CSS3

Hallo teman-teman balik lagi pada tutorial dumet school, pada tutorial kali ini saya akan mempraktekan bagaimana cara membuat sebuah element bergerak dengan menggunakan @keyframe.

Pada css3, keyframe sendiri ialah suatu frame atau wadah yang menyimpan berbagai animasi objek dengan transisi yang halus, oke daripada bingung kita langsung saja praktek.

Silahkan teman-teman buat sebuah file dan ketikan script berikut:

<div></div>

Saya membuat element div diatas dimana div ini saya berikan pengaturan css sebagai berikut:

div {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    animation-name: latihan;
    animation-duration: 4s;}

CSS di atas saya memberikan style lebar dan tinggi serta background hijau, dengan memberikan position relative agar element yang saya letakan sendiri dapat mengatur dirinya sendiri, lalu saya berikan animasi namenya latihan dengan durasi 4s

Sekarang kita akan membuat animasi agar si element tersebut bergerak,silahkan ketikan script berikut :

@keyframes latihan {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}

Jika sudah save lalu coba jalankan pada browser,

Hasilnya element div tersebut akan bergerak ke kanan,kebawah,kekiri lalu keatas, itu disebabkan karena pada kondisi 25% saya membuat jarak sebanyak 200px di kiri, lalu di kondisi 50% saya membuat jarak atasnya sebanyak 200px begitu seterusnya,

NOTE :

Tidak berjalan di safari

Oke cukup sekian artikel kali ini selamat mencoba semoga bermanfaat, terimakasih