我有一个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;
}
}
其他回答
实际上没有人带来它，它的工作方式是动画-播放-状态设置为暂停。
你正在寻找:
animation-fill-mode: forwards;
更多关于MDN和浏览器支持列表的信息在canIuse。
不是你的问题，你设置webkitAnimationName回到什么，所以这是重置CSS为你的对象回到它的默认状态。如果你移除重置状态的setTimeout函数，它不会停留在原来的位置吗?
-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;
}
}
最好的方法似乎是把最终状态放在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;}
}
