实施例。看看......

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>

将包装纸高度调整为与所需框架一样高（从您的关键帧我认为它是150px）。 在.wrapper上设置overflow:hidden

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

这应该只显示您想要看到的内容。精灵表的一个框架。并在transform:translateY()

上使用img 制作动画

@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％关键帧。剩下的就被填满...... MAGIC！... Also created a JSFiddle for ya

我借了精灵表。创建者的道具（可以在代码上看到其URL）。图像宽960px。所以在我的情况下，我使用了translateX而不是translateY。

＆＃13;

@keyframes walking {
  100% { 
    transform:translateX(-960px);
   }
}

.wrapper {
  overflow:hidden;
  width:120px;
}

.image {
  animation:walking 500ms steps(8) infinite;
}

＆＃13;

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

＆＃13;

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

1 个答案:

实施例。看看......