我有一个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); }
}
我刚刚发布了一个类似的答案,你可能想看看:
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.
-webkit-animation-fill-mode:转发;/* Safari 4.0 - 8.0 */
animation-fill-mode:转发;
浏览器支持
Chrome 43.0 (4.0 -webkit)
IE 10 0。
Mozilla 16.0 (5.0 - moi -)
沙法里4。0网络工具
歌剧15.0 -webkit- (12112 .0 -o)
用法:-
.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;
}
}