上一篇: css – 使用引导时如何使图标小？下一篇:css – 浮动流体图像留下文本包装

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

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 动画完成后如何使动画的最后一个关键帧“停留”，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

解决方法

删除动画填充模式的双重声明只是转发：

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

演示http://jsfiddle.net/DR9Lu/6/