css帧动画的background position变化实际有偏差
发布于 6 年前 作者 houyang 524 次浏览 来自 官方Issues

要用css animation-function的steps实现一个类似小人跑动的逐帧显示的动画，但是应用到小程序上，出现了每次移动距离偏大的问题，即不能移动到下一张图的准确的位置，有偏差，下一张图的中心不在图片显示区域的中心，越到后面越偏。后来我用同一张图片复制多次的一张雪碧图去实现，按道理讲应当静止不动，但实际上就是每次都往下移动了多一点点，所以越往后越明显。

用一张

图来说明

.loading {
  width: 143rpx;
  height: 128rpx;
  background-image: url(xxx.png);
  background-size: cover;
  animation: ani 7s steps(7, end) infinite both;
}
[@keyframes](/user/keyframes) ni {
  from {
    background-position: 0 0;
  }
  to {
    /*128*7=896*/
    background-position: 0 -896rpx;
  }
}
1 回复

别用rpx，用px试试

回到顶部