所以我有含有行走动画的16帧中的子画面片和我意图使用关键帧通过改变使用背景位置动画它：闪烁在使用中IE11上精灵表关键帧+背景位置

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中，在动画结束时，它会在再次循环之前短暂消失。创建闪烁效果

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

来源

2016-09-24 user3157517

不要为背景位置设置动画。这确实会导致性能问题。相反，使用img，并让它达到所需的高度。它包装在一个div是这样的...

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

调整包装的高度是作为期望的帧为高（从你的关键帧我asumed它是150像素）。而设置overflow:hidden上.wrapper

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

为例。检查出来...

BY使用steps(8)我只需要设置动画的100％关键帧。剩下的就被填满了...... MAGIC！... 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>

来源

2016-09-24 21:12:48

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

回答

为例。检查出来...

相关问题