我有一个4部分CSS3动画播放点击-但动画的最后一部分是为了把它从屏幕上。
然而，一旦播放，它总是回到原来的状态。谁知道我可以停止它的最后一个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); }
}
当前回答
不是你的问题，你设置webkitAnimationName回到什么，所以这是重置CSS为你的对象回到它的默认状态。如果你移除重置状态的setTimeout函数，它不会停留在原来的位置吗?
其他回答
我刚刚发布了一个类似的答案，你可能想看看:
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.
今天我了解到填充模式有一个限制。这是来自苹果开发者的消息。传闻是6个左右，但不确定。 或者，你可以将类的初始状态设置为你想要动画结束的方式，然后在/ 0%处将其初始化。
不是你的问题，你设置webkitAnimationName回到什么，所以这是重置CSS为你的对象回到它的默认状态。如果你移除重置状态的setTimeout函数，它不会停留在原来的位置吗?
最好的方法似乎是把最终状态放在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;}
}
实际上没有人带来它，它的工作方式是动画-播放-状态设置为暂停。
