CSS 在最后一帧停止 CSS3 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4359627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stopping a CSS3 Animation on last frame
提问by user531192
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
我有一个由 4 部分组成的 CSS3 动画在点击时播放 - 但动画的最后一部分是为了将其从屏幕上移除。
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
但是，一旦播放，它总是会恢复到原始状态。任何人都知道我如何在它的最后一个 css 帧 (100%) 上停止它，或者如何在它播放后摆脱它所在的整个 div。
@keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
回答by methodofaction
You're looking for:
您正在寻找：
animation-fill-mode: forwards;
More info on MDNand browser support list on canIuse.
有关 MDN 的更多信息和canIuse上的浏览器支持列表。
回答by davnicwil
If you want to add this behaviour to a shorthand animationproperty definition, the order of sub-properties is as follows
如果要将此行为添加到速记animation属性定义中，则子属性的顺序如下
animation-name- defaultnone
animation-name-默认none
animation-duration- default0s
animation-duration-默认0s
animation-timing-function- defaultease
animation-timing-function-默认ease
animation-delay- default0s
animation-delay-默认0s
animation-iteration-count- default1
animation-iteration-count-默认1
animation-direction- defaultnormal
animation-direction-默认normal
animation-fill-mode- you need to set this toforwards
animation-fill-mode-您需要将其设置为forwards
animation-play-state- defaultrunning
animation-play-state-默认running
Therefore in the most common case, the result will be something like this
因此，在最常见的情况下，结果将是这样的
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
回答by Hitesh Sahu
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ animation-fill-mode: forwards;
Browser Support
浏览器支持
- Chrome 43.0 (4.0 -webkit-)
- IE 10.0
- Mozilla 16.0 ( 5.0 -moz-)
- Shafari 4.0 -webkit-
- Opera 15.0 -webkit- (12.112.0 -o-)
- Chrome 43.0 (4.0 -webkit-)
- 浏览器 10.0
- Mozilla 16.0 ( 5.0 -moz-)
- Shafari 4.0 -webkit-
- Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
用法：-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
回答by Optimus Prime
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
最好的方法似乎是将最终状态放在 css 的主要部分。就像这里，我把宽度设置为220px，以便它最终变成220px. 但开始0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
回答by jfriend00
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
您是否将 webkitAnimationName 设置为空，以便将对象的 CSS 重置为默认状态，这不是您的问题。如果您只是删除重置状态的 setTimeout 函数，它不会停留在它结束的地方吗？
回答by Jesse
I just posted a similar answer, and you probably want to have a look at:
我刚刚发布了一个类似的答案，你可能想看看：
http://www.w3.org/TR/css3-animations/#animation-events-
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
您可以找出动画的各个方面，例如开始和停止，然后，一旦说 'stop' 事件已触发，您就可以对 dom 执行任何您想做的事情。我前段时间试过这个，它可以工作，但我猜你暂时会被限制在 webkit 上（但你可能已经接受了）。顺便说一句，由于我已经为 2 个答案发布了相同的链接，因此我会提供以下一般建议：查看 W3C - 他们几乎编写了规则并描述了标准。此外，webkit 开发页面非常关键。
回答by Marco
Nobody actualy brought it so, the way it was made to work is animation-play-stateset to paused.
实际上没有人把它带来，它的工作方式是将动画播放状态设置为暂停。
回答by iheartflex
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain. Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
我今天了解到您要为填充模式使用一个限制。这是来自 Apple 开发人员。谣言是 * 大约 * 六，但不确定。或者，您可以将类的初始状态设置为您希望动画结束的方式，然后 * initialize * it at from / 0% 。
