最近要做一个页面静态人物进场和退场的动画效果。
UI同事说由于图片有透明的部分，所以ps导出的git格式的动画会有模糊感，效果不好。
她可以把动画针图片提供给我，让我前端生成动画。
ok~也可以。
这里我主要用到的是css animation关键帧动画。
把UI提供的动画针图片合成一张图片，在animation中利用 background-position改变图片的位置。
UI提供的针图片较少，为了得到一个满意的动画效果，我调试了很多次针图片的数量和位置，这里改图用的时间较多，修改代码较简单。
具体代码：
html:
<div className={styles.animationImages} />
css:
.animationImages{
position: absolute;
right: -20px;
top: -100px;
width:400px;
height: 300px;
pointer-events: none;
background-image: url(./images/exit.png);
animation: walkOutAnimation 0.6s steps(12) 1;
animation-fill-mode: forwards;
}
@keyframes walkOutAnimation {
0% {
background-position: 0;
}
100% {
background-position: -4800px;
}
}
