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

bd96500e110b49cbb3cd949968f18be7.png

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.

ilKfd.png

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

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值