Style CSS yang dibutuhkan untuk membuatnya ada 4. Yang pertama adalah animation-name: kontol;, nah ini maksudnya untuk menghubungkan ke @keyframes sehingga menjadi @keyframes kontol. Lalu yang kedua ada animation-duration: 4s;, ini berfungsi untuk menentukan berapa lama animasi bergerak dari 0% sampai 100%, semakin lama waktunya semakin lambat pula pergerakannya. Lalu yang ketiga ada, animation-iteration-count: infinite;, ini berfungsi agar animasi bergerak secara terus menerus, ketika infinite diganti menjadi angka 3, maka animasinya akan bergerak mengulang selama 3 kali dari 0% sampai 100%. dan yang terakhir ada @keyframes, nah @keyframes digunakan untuk mengatur pergerakan animasinya, lau diakhiri dengan nama contohnya @keyframes kontol yang bisa digunakan untuk menghubungkan ke animation-name: kontol;
Code:
<!DOCTYPE html>
<html>
<head>
<title>Perocbaan</title>
</head>
<body>
<style type="text/css">
.babi {
padding:20px 40px;
background-color:red;
width:20px;
animation-name: kontol;
animation-duration: 4s;
position:relative;
animation-iteration-count: infinite;
}
@keyframes kontol{
0% {
background-color:red;
left:0px;
top:0px;
}
50% {
background-color:purple;
left:200px;
top:200px;
}
75%{
background-color:lightgreen;
right:200px;
left:0px;
top:200px;
}
100%{
background-color:red;
bottom:200px;
top:0px;
left:0px;
right:0px;
}
</style>
<div class="babi"></div>
</body>
</html>
Komentar
Posting Komentar