CSS 动画完成后如何使动画的最后一个关键帧“停留”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20790305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the last keyframe of your animation "stay" after animation is finished
提问by JSArrakis
I have tried many iterations of this, but it doesnt seem to want to just stay on the last keyframe.
我已经尝试了很多次迭代，但它似乎不想只停留在最后一个关键帧上。
Im not sure what Im doing wrong here.
我不确定我在这里做错了什么。
<style>
#container{
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#centerhex{
background-image:url(http://i.imgur.com/4sZDtfK.png);
background-repeat:no-repeat;
background-position:center;
height:224px;
width:210px;
position:absolute;
margin-left: -105px;
margin-top: -112px;
top:50%;
left:50%;
}
.fadein{
animation:fadein 1.5s;
animation-timing-function:linear;
animation-delay:1s;
animation-fill-mode:forwards, none
animation-iteration-count: 1
-webkit-animation-iteration-count: 1
-webkit-animation:fadein 1.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards, none
}
.transtart{
opacity:0
}
@-webkit-keyframes fadein {
0%{opacity:0;}
50%{opacity:1;}
60%{opacity:1;}
100%{opacity:0.2;}
}
@keyframes fadein {
0%{opacity:0;}
50%{opacity:1;}
60%{opacity:1;}
100%{opacity:0.2;}
}
</style>
</head>
<body>
<div id="container">
<div class="fadein transtart">
<div id="centerhex"></div>
</div>
</div>
The animation fill should take care of it, but for some reason its not. Any help will be appreciated.
动画填充应该照顾它，但由于某种原因它没有。任何帮助将不胜感激。
回答by DaniP
Remove the dual declaration for animation-fill-modeis just forwards:
删除双重声明animation-fill-mode只是forwards：
.fadein{
animation:fadein 1.5s;
animation-timing-function:linear;
animation-delay:1s;
animation-fill-mode:forwards;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation:fadein 1.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards;
}
The demo http://jsfiddle.net/DR9Lu/6/
