animation停留_css – 动画完成后如何使动画的最后一个关键帧“停留”

我已经尝试了很多次迭代,但似乎并不想留在最后一个关键帧上.

我不知道我在这里做错了什么

#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;}

}

动画填充应该照顾它,但由于某种原因,它不是.任何帮助将不胜感激.