Scribd
Upload
8 views

!Doctype HTML

Uploaded by

raushanraj271107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views

!Doctype HTML

Uploaded by

raushanraj271107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

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>

You might also like