Css 如何制作动画的最后一个关键帧；“留下来”；动画完成后_Css_Css Animations

Css 如何制作动画的最后一个关键帧；“留下来”；动画完成后

css

Css 如何制作动画的最后一个关键帧；“留下来”；动画完成后,css,css-animations,Css,Css Animations,我已经尝试了多次迭代，但它似乎不想只停留在最后一个关键帧上我不确定我做错了什么 <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

我已经尝试了多次迭代，但它似乎不想只停留在最后一个关键帧上

我不确定我做错了什么

<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>


#容器{
位置：相对位置；
宽度：100%；
身高：100%；
背景色：黑色；
}
#中心六角{
背景图片：url(http://i.imgur.com/4sZDtfK.png);
背景重复：无重复；
背景位置：中心；
高度：224px；
宽度：210px；
位置：绝对位置；
左边距：-105px；
边缘顶部：-112px；
最高：50%；
左：50%；
}   
法代因先生{
动画：fadein 1.5s；
动画计时功能：线性；
动画延迟：1s；
动画填充模式：正向，无
动画迭代计数：1
-webkit动画迭代计数：1
-webkit动画：fadein 1.5s；
-webkit动画计时功能：线性；
-webkit动画延迟：1s；
-webkit动画填充模式：正向，无
}
特朗斯塔特先生{
不透明度：0
}
@-webkit关键帧fadein{
0%{不透明度：0；}
50%{不透明度：1；}
60%{不透明度：1；}
100%{不透明度：0.2；}
}
@关键帧淡入淡出{
0%{不透明度：0；}
50%{不透明度：1；}
60%{不透明度：1；}
100%{不透明度：0.2；}
}

动画填充应该处理它，但由于某些原因，它不是。

删除

动画填充模式的双重声明

只是

转发

：

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

演示

非常感谢！看来我在匆忙中也漏掉了一些分号。