<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horse Run Animation</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #87ceeb; /* Sky blue background */
overflow: hidden;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #654321; /* Brown ground */
}
.horse {
position: absolute;
bottom: 50px;
left: -100px;
width: 100px;
height: 60px;
background:
url('https://upload.wikimedia.org/wikipedia/commons/e/eb/Horse_running_icon.png')
no-repeat center;
background-size: cover;
animation: run-horse 1s steps(4) infinite;
}
@keyframes run-horse {
from {
background-position: 0;
}
to {
background-position: -400px; /* Adjust based on the sprite image width */
}
}
@keyframes move-horse {
from {
left: -100px;
}
to {
left: 110%;
}
}
</style>
</head>
<body>
<div class="ground"></div>
<div id="horse" class="horse"></div>
<script>
const horse = document.getElementById('horse');
function startHorseRun() {
// Add running animation
horse.style.animation = 'move-horse 5s linear infinite';
}
// Start the horse animation after 1 second
setTimeout(startHorseRun, 1000);
</script>
</body>
</html>
