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

问题描述

我遇到了一些困难，尝试播放CSS3关键帧动画，并在动画完成后，相关的元素粘在最后一帧。对我的理解，我必须设置为这个工作的属性应该是animation-fill-mode，它应该具有forward的价值;这不会做任何事情。

  .animatedSprite {
 .animation-name：sprite; 
 .animation-duration：.5s; 
 .animation-iteration-count：1; 
 .animation-direction：normal; 
 .animation-timing-function：steps（3）; 
 .animation-fill-mode：forward; 
 //供应商前缀...} 
  

这将只播放一次动画回到第一帧。我在JSFiddle找到了一个关键帧动画的示例（ http://jsfiddle.net/simurai/CGmCe/ ），并更改了填充模式转发并将迭代计数设置为1也不会做任何事情。

任何帮助将非常感激。

解决方案

animation-fill-mode：forward 是要使用的正确属性。不是似乎工作，因为sprite图片背景有一个默认的 background-repeat：repeat ，因此您认为所看到的最后框架实际上是

  
 background：url（http://files.simurai.com/misc/sprite.png）no-repeat 
 
动画：play .8s steps（10）向前; 
 
 @keyframes播放{
 from {background-position：0px; } 
 to {background-position：-500px; } 
} 
  

并运行演示最终帧现在为空 - $ c> forward 正在做什么应该做的。解决方案的第二部分是更改最终的到和步骤 CSS属性来正确定位背景。所以我们真的需要后台停止在 -450px 并使用 9 步骤。

  -webkit-animation：play .8s steps（9） 
 
 @keyframes播放{
从{background-position：0; } 
 to {background-position：-450px; } 
} 
  

查看演示 - 我只修复了Chrome属性。以下是原始图片消失时的示例图片。

< img src =https://i.stack.imgur.com/ilKfd.pngalt =Waving sprite>

  .hi {width：50px; height：72px; background：url（http://i.stack.imgur.com/ilKfd.png）no-repeat; -webkit-animation：播放.8s步（9）向前; -moz动画：播放.8s步（10）无限; -ms-animation：play .8s steps（10）infinite; -o-animation：play .8s steps（10）infinite;动画：播放.8s步骤（9）向前;} @  -  webkit-keyframes播放{from {background-position：0px; }到{background-position：-450px; }} @  -  moz-keyframes play {from {background-position：0px; }到{background-position：-500px; }} @  -  ms-keyframes play {from {background-position：0px; }到{background-position：-500px; }} @  -  o-keyframes play {from {background-position：0px; }到{background-position：-500px; }} @ keyframes play {from {background-position：0px; }到{background-position：-450px; }}  

 < div class =hi> < / div>  

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屋！