Pada artikel kali ini saya akan mempraktekan bagaimana cara membuat animasi sederhana dengan menggunakan fungsi @keyframe pada css, fungsi @keyframe sendiri adalah untuk menciptakan animasi sederhana secara otomatis sesuai dengan apa yang kita inginkan,
nah untuk lebih jelasnya kita coba buat animasi sederhana dengan munggunakan fungsi tersebut,
oke silahkan buat sebuah file html dan buat sebuah div seperti script berikut :
<div></div>
nah div ini yang akan kita buat animasi sedikit, oke sekarang kita beralih ke css nya, silahkan teman-teman ketikan script css berikut:
div {
width: 100px;
height: 100px;
background: red;
position :relative;
animation: mymove 5s infinite;
}
/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
script di atas menjelaskan bahwa saya membuat animasi dengan nama mymove selama 5detik tanpa henti, lalu saya mengatur efek animasinya dengan fungsi @keyframes dengan nama mymove dan pengaturan seperti di atas, dengan pengaturan seperti itu element div yang tadi kita atur akan bergerak keatas dan kebawah tanpa henti dengan ketentuan tinggi berdasarkan yang kita atur pada fungsi @keyframes nya,
oke cukup sekian, semoga bermanfaat, selamat mencoba,,
terimakasih