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