在 IE11 的精灵表上使用关键帧 + 背景位置时闪烁

Question

所以我有一个包含 16 帧步行动画的精灵表，我打算通过使用以下方法更改背景位置来使用关键帧对其进行动画处理：

animation: abc 0.55s infinite steps(1);


    @keyframes abc {
        0%  {background-position(-2250vh,-10vh);}
        6.67%   {background-position(-2100vh,-10vh);}
        13.33%  {background-position(-1950vh,-10vh);}
        ...
        100%    {background-position(0,-10vh);}
    }

它在 chrome 和 firefox 中运行良好，但在 IE 中，在动画结束时，它会在再次循环之前短暂消失。创建闪烁效果

当我关闭动画并使用控制台手动测试每个位置时，每个帧都正确显示，所以这不是由于定位不正确。

Answer 1

不要为背景位置设置动画。这确实会导致性能问题。相反，使用img 并让它尽可能高。像这样将其包裹在div 中......

<div class="wrapper">
  <img class="image" src='some-tall-image.png'/>
</div>

将包装高度调整为与所需帧一样高（根据您的关键帧，我假设它为 150 像素）。并在 .wrapper 上设置overflow:hidden

.wrapper {
  height:150px;
  overflow:hidden;
}

这应该只显示您想看到的内容。你的精灵表的单帧。并且在img上使用transform:translateY()制作动画

@keyframes abc {
    0%  {transform:translateY(-2250vh);}
    6.67%   {transform:translateY(-2100vh);}
    13.33%  {transform:translateY(-1950vh);}
    100%    {transform:translateY(0vh);}
}

.image {
  animation: abc ...;
}

示例。看看...

通过使用steps(8)，我只需要设置动画的 100% 关键帧。剩下的被填满了……魔法！……Also created a JSFiddle for ya

我借了精灵表。给创建者的道具（可以在代码上看到其 url）。图片宽 960 像素。所以就我而言，我使用translateX 而不是translateY。

@keyframes walking {
  100% { 
    transform:translateX(-960px);
   }
}

.wrapper {
  overflow:hidden;
  width:120px;
}

.image {
  animation:walking 500ms steps(8) infinite;
}

<div class="wrapper">
  <img class= "image" src="https://www.adamkhoury.com/demo/sprite_sheets/adam.png">
</div>