css3中的animation的动画帧制作-卡通人物的走动效果
代码如下；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation动画帧</title>
<style>
div{
width: 185px;
height: 300px;
margin-top: 100px;
margin-left: 1300px;
/* border: brown 1px solid; */
background: url(images/charector.png) no-repeat ;
/* background-size: 185px 300px; */
animation: run 1.5s infinite step-end;
}
@keyframes run{
0%{
opacity: 1;
background-position: 0px;
transform: translateX(-185px);
}
16.66%{
opacity: 0.9;
background-position: -160px;
transform: translateX(-370px);
}
33.33%{
opacity: 0.8;
background-position: -336px;
transform: translateX(-555px);
}
49.98%{
opacity: 0.6;
background-position: -520px;
transform: translateX(-740px);
}
66.64%{
opacity: 0.4;
background-position: -700px;
transform: translateX(-925px);
}
88.3%{
opacity: 0.2;
background-position: -900px;
transform: translateX(-1110px);
}
100%{
background-position: -1100px;
transform: translateX(-1295px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>