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

问题描述

我在尝试播放 CSS3 关键帧动画并在动画完成后让相关元素停留在最后一帧时遇到了一些困难.据我了解，我必须为此设置的属性应该是 animation-fill-mode，它应该具有 forwards 的值；这没有任何作用.

.animatedSprite {.animation-name:精灵；.animation-duration: .5s;.animation-iteration-count: 1;.animation-direction:正常；.animation-timing-function:步骤(3)；.animation-fill-mode:转发；//供应商前缀... }

这将只播放一次动画，然后返回到第一帧.我在 JSFiddle (

.hi {宽度:50px；高度:72px；背景: url("http://i.stack.imgur.com/ilKfd.png") 不重复；-webkit-animation:向前播放 .8s 步(9)；-moz-animation:无限播放 0.8s 步(10)；-ms-animation:无限播放 0.8s 步(10)；-o-animation:无限播放 0.8s 步(10)；动画:向前播放 .8s 步(9)；}@-webkit-keyframes 播放 {从 { 背景位置:0px;}到 { 背景位置:-450px;}}@-moz-keyframes 播放 {从 { 背景位置:0px;}到 { 背景位置:-500px;}}@-ms-keyframes 播放 {从 { 背景位置:0px;}到 { 背景位置:-500px;}}@-o-keyframes 播放 {从 { 背景位置:0px;}到 { 背景位置:-500px;}}@keyframes 播放 {从 { 背景位置:0px;}到 { 背景位置:-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屋！