css3帧动画的实现
程序员文章站
2022-03-18 18:09:50
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>序列帧动画</title>
<style>
.main{
height: 300px;
width: 180px;
background: url(img/girl.png) 0 center;
animation: jump steps(7) 1s infinite;
/* background: url(img/girl.png); */
/* background-position: 0 center;
animation: jump;
animation-duration: 1s;
animation-timing-function: steps(7);
animation-iteration-count: infinite;
*/
}
@-webkit-keyframes jump{
from{
background-position-x: -1260px;
}
to{
background-position-x:0px;
}
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>