CSS3关键帧动画:结束并停留在最后一帧

Question

我在尝试播放CSS3关键帧动画时遇到了一些困难,并且在动画完成后将相关元素粘贴在最后一帧.根据我的理解,我必须为此设置的属性应该是动画填充模式,它应具有前进的值; 这没有任何作用.

.animatedSprite { 
    .animation-name: sprite;
    .animation-duration: .5s;
    .animation-iteration-count: 1;
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards;
    //Vendor prefixes... }

这将只播放一次动画,然后返回第一帧.我在JSFiddle(http://jsfiddle.net/simurai/CGmCe/)上找到了关键帧动画的示例,并且将填充模式更改为前进并将迭代计数设置为1也不会执行任何操作.

任何帮助将不胜感激.

Answer 1

animation-fill-mode:forwards是正确的属性使用.是不似乎工作,因为精灵图像背景有一个默认的background-repeat:repeat,所以最后你认为你所看到的框架实际上是第一个重复的背景图像的帧.

如果你设置

background: url("http://files.simurai.com/misc/sprite.png") no-repeat

animation: play .8s steps(10) forwards;

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

并运行演示,最后一帧现在是空白的 - 所以forwards它正在做它应该做的事情.解决方案的第二部分是更改final to和stepsCSS属性以正确定位背景.所以我们真的需要背景来停下来-450px并使用9步骤.

-webkit-animation: play .8s steps(9) forwards;

@keyframes play {
    from { background-position: 0; }
    to { background-position: -450px; }
}

查看演示 - 我只修复了Chrome属性.此处还有原始图像消失的样本图像.

.hi {
    width: 50px;
    height: 72px;
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
    
    -webkit-animation: play .8s steps(9) forwards;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(9) forwards;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

<div class="hi"></div>