<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: skyblue;
}
@keyframes husky_running {
50% {
background-position: -591px 0px;
}
50.01% {
background-position: 0 -88.58px;
}
100% {
background-position: -591px -88.58px;
}
}
@keyframes move {
100% {
transform: translate(-300px, 88.58px);
}
}
.husky {
height: 84px;
width: 117px;
margin: 50px auto;
background-image: url(./2021042516115940.png);
animation: husky_running 0.5s steps(5) infinite, move 3s linear forwards;
/* overflow: hidden;*/
/* animation: husky_running 0.5s steps(5) infinite;
-webkit-animation: husky_running 0.5s steps(5) infinite; */
}
</style>
</head>
<body>
<div class="husky"></div>
<script>
</script>
</body>
</html>
06-07
3060
11-02
352
08-03
1874
12-05
1792