Membuat Animasi Element Bergerak dengan @Keyframe pada CSS3

Hallo teman-teman balik lagi di panduan Source Code Aplikasi, di panduan kali ini saya akan mempraktekan bagaimana cara merancang sebuah element bergerak dengan menggunakan @keyframe.

Di css3, keyframe sendiri ialah suatu frame atau wadah yang menyimpan bermacam animasi objek dengan transisi yang halus, oke daripada bingung kita seketika saja praktek.

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

<div></div>

Saya merancang element div diatas dimana div ini saya berikan pengaturan css selaku 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

Kini kita akan merancang 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;}

Kalau telah save lalu coba jalankan di browser,

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

NOTE :

Tak berjalan di safari

Oke lumayan sekianlah artikel kali ini selamat mencoba semoga bermanfaat, terimakasih

 

Sumber https://kursuswebsite.org