我有一个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); }
}
当前回答
实际上没有人带来它，它的工作方式是动画-播放-状态设置为暂停。
其他回答
最好的方法似乎是把最终状态放在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;}
}
你正在寻找:
animation-fill-mode: forwards;
更多关于MDN和浏览器支持列表的信息在canIuse。
实际上没有人带来它，它的工作方式是动画-播放-状态设置为暂停。
我刚刚发布了一个类似的答案，你可能想看看:
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;
}
}
