CSS3 Animate:动画运行后如何使对象不还原为其初始位置? [重复]

问题描述 投票:22回答:3
我正在尝试在CSS(特别是Webkit)中对形状进行简单的转换。动画将按预期运行,但完成后,div将恢复为其初始状态。有什么办法可以使其保持最终状态?

到目前为止,这里有我的CSS:

@-webkit-keyframes rotate-good { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-90deg); } } @-webkit-keyframes rotate-bad { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(90deg); } } #good-arrow { -webkit-animation-name: rotate-good; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; } #bad-arrow { -webkit-animation-name: rotate-bad; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; }

css css3
3个回答
8
投票
哦,很简单,只需将所有CSS规则设置为最终结果即可。Example

31
投票
更简单的方法是添加:

-webkit-animation-fill-mode:转发;

保留最终的关键帧状态。

更新:完整的跨浏览器

-webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;


14
投票
跨浏览器解决方案是:

-webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;

由于某些原因,上面的Madara Uchiha所做的评论并非总是可能的:想象一下,而不是立即开始动画(animation-delay:0s),您需要10秒钟的延迟才能开始。如果是这样,您将看到动画元素的最终状态10秒钟,然后动画将其从de 0关键帧过渡到100关键帧,但始终会看到10秒钟的结束状态。
© www.soinside.com 2019 - 2024. All rights reserved.