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

Question

所以我有一个 sprite sheet 包含 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;
}

这应该只显示您想要看到的内容。你的精灵的单帧-sheet。并且 在 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

我借了精灵sheet。对创作者的支持（可以在代码上看到其 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>

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

Flickering when using keyframes + background position on sprite sheet in IE11

css

internet-explorer

css-animations

keyframe

background-position

示例。看看...