css - 在 IE11 中使用关键帧 + Sprite 表上的背景位置时闪烁

Question

所以我有一个包含 16 帧行走动画的 sprite 表，我打算通过使用以下方法更改背景位置来使用关键帧为其设置动画:

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;
}

这应该只显示您想要看到的内容。 Sprite 表的单帧。并在 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

我借了 Sprite 表。对创建者的支持(可以在代码上看到其 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>