使用CSS Sprite动画时防止重画

Question

在运行css sprite动画时是否可以完全防止重新绘制？

我尝试使用will-change: background-position;，在这方面似乎根本没有做任何事情。

Demo in jsfiddle

（如果要查看重新绘制，请尝试使用不带iframe的此链接） https://fiddle.jshell.net/alvarotrigo/4xafot6p/5/show/

.demo{
    position: absolute;
    height: 256px;
    width: 256px;
    display: block;
    z-index: 999;
    display: block;
    background-image: url('https://cdn-images-1.medium.com/max/2600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-position: 0 0;

}
.demo.active{
    bottom: -20px;

    will-change: background;
    animation: play_1 300ms steps(6) infinite;
}
@keyframes play_1 {
   from{ background-position-x: 0; }
   to{ background-position-x: -1536px; }
}