CSS3动画关键帧：结束，留在最后一帧 [英] CSS3 Keyframe Animations: End and stay on the last frame

问题描述

我碰到的一些困难尝试播放CSS3关键帧动画并在最后一帧中相关的元素棍子动画完成后。据我了解，我必须为这个设置工作应该是动画填充模式，应该具备哪些前锋价值的财产;这并没有做任何事情。

  .animatedSprite {
    .animation名：精灵;
    .animation持续时间：.5s;
    .animation迭代计数：1;
    .animation方向：正常;
    .animation定时功能：步骤（3）;
    .animation填充模式：前锋;
    //厂商prefixes ...}
 

这将只播放动画一次，然后返回到第一帧。我发现关键帧动画的例子在的jsfiddle（ http://jsfiddle.net/simurai/CGmCe/ ），并改变填充模式向前和迭代次数设置为1不会做任何事情那边。

任何帮助将大大AP preciated。

解决方案

动画填充模式：转发是使用正确的属性。是没有的显得的工作，因为精灵图像背景有一个默认的<一个href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\"><$c$c>background-repeat:repeat,这样的你以为你看到的最后一个的框架实际上是重复的背景图像的第一个的框架。

如果您设置

 背景：网址（http://files.simurai.com/misc/sprite.png）不重复动画：玩.8s步骤（10）转发;@keyframes玩{
    从{背景位置：0像素; }
    为{背景位置：-500px; }
}
 

和运行演示的最后一帧是空白的，现在 - 这样转发是做什么它应该做的。该解决方案的第二部分是改变最终的到和步骤 CSS属性正确定位的背景。所以，我们真正需要的背景停止在 -450px ，并使用 9 步骤。

  -webkit-动画：打.8s步骤（9）转发;@keyframes玩{
    从{背景位置：0; }
    为{背景位置：-450px; }
}
 

查看演示 - 我只固定在Chrome的特性​​。另外这里的情况下，原来消失的样本图像。

\r

\r

.hi {\r
    宽度：50像素;\r
    高度：72px;\r
    背景：网址（http://i.stack.imgur.com/ilKfd.png）不重复;\r
    \r
    -webkit-动画：打.8s步骤（9）转发;\r
       -moz-动画：打.8s步骤（10）无限;\r
        -ms动画：打.8s步骤（10）无限;\r
         -o-动画：打.8s步骤（10）无限;\r
            动画：玩.8s步骤（9）转发;\r
}\r
\r
@ -webkit-关键帧播放{\r
   从{背景位置：0像素; }\r
     为{背景位置：-450px; }\r
}\r
\r
@ -moz-关键帧播放{\r
   从{背景位置：0像素; }\r
     为{背景位置：-500px; }\r
}\r
\r
@ -ms关键帧播放{\r
   从{背景位置：0像素; }\r
     为{背景位置：-500px; }\r
}\r
\r
@ -o-关键帧播放{\r
   从{背景位置：0像素; }\r
     为{背景位置：-500px; }\r
}\r
\r
@keyframes玩{\r
   从{背景位置：0像素; }\r
     为{背景位置：-450px; }\r
}

\r

＆LT; D​​IV CLASS =喜＆GT;＆LT; / DIV＆GT;

\r

\r

\r

I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be animation-fill-mode, which should have the value of forwards; this doesn't do anything.

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

This will just play the animation once and then go back to the first frame. I found an example of keyframe animations at JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ), and changing the fill mode to forwards and setting the iteration count to 1 wouldn't do anything there, either.

Any help would be greatly appreciated.

解决方案

animation-fill-mode:forwards is the correct property to use. Is does not seem to work because the sprite image background has a default background-repeat:repeat, so the last frame you think you are seeing is actually the first frame of the repeated background image.

If you set

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

and run the demo the final frame is now blank - so forwards is doing what it should do. The second part of the solution is to change the final to and steps CSS properties to position the background correctly. So we really need the background to stop at -450px and use 9 steps.

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

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

See demo - I only fixed the Chrome properties. Also here is the sample image in case the original disappears.

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

这篇关于CSS3动画关键帧：结束，留在最后一帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！