在周期结束时停止动画

Question

以下代码将动画重置为第一帧并重复。出于某种原因，animation-fill-mode:forwards;无效。

我不确定它是否与像素或顶部边距有关。

这是我的代码的链接。 http://jsfiddle.net/HGHyQ/

HTML

<div id="wrapper_founded">
<div id="date_anim">
<span id="first_num">1 2</span> 
<span id="second_num">6 7 8 9 0</span>
<span id="third_num">1 2 3 4 5 6 7 1</span>
<span id="fourth_num">4 5 6 7 8 9 0</span>
</div>
</div>

CSS

#wrapper_founded {
position:relative;
width:100%;
float:left;
}

#wrapper_founded h3 {
padding:0 60px;
}

#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;

}

#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}

 #wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s infinite ease-in-out;
-webkit-animation:first_num 6s infinite ease-in-out;
animation:first_num 6s infinite ease-in-out;

}

@-moz-keyframes first_num {
60% {
    top:-61px;
}

80% {
    top:-61px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

@-webkit-keyframes first_num {
60% {
    top:-61px;
}

80% {
    top:-61px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

@keyframes first_num {
60% {
    top:-61px;
}

80% {
    top:-61px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

  #wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s infinite ease-in-out;
-webkit-animation:second_num 6s infinite ease-in-out;
animation:second_num 6s infinite ease-in-out;
}

@-moz-keyframes second_num {
60% {
      top:-250px;
}

80% {
       top:-250px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

@-webkit-keyframes second_num {
60% {
      top:-250px;
}

80% {
      top:-250px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

@keyframes second_num {
60% {
     top:-250px;
}

80% {
     top:-250px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

  #wrapper_founded #date_anim span#third_num {
top:-381px;
-moz-animation:third_num 6s infinite ease-in-out;
-webkit-animation:third_num 6s infinite ease-in-out;
animation:third_num 6s infinite ease-in-out;
}

@-moz-keyframes third_num {
60% {
    top:3px;
}

80% {
    top:3px;
}

95% {
    top:-381px;
}

100% {
    top:-381px;
}
}

@-webkit-keyframes third_num {
60% {
    top:3px;
}

80% {
    top:3px;
}

95% {
    top:-381px;
}

100% {
    top:-381px;
}
}

@keyframes third_num {
60% {
    top:3px;
}

85% {
    top:3px;
}

95% {
    top:-381px;
}

100% {
    top:-381px;
}
}

  #wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s infinite ease-in-out;
-webkit-animation:fourth_num 6s infinite ease-in-out;
animation:fourth_num 6s infinite ease-in-out;
}

@-moz-keyframes fourth_num {
60% {
    top:-377px;
}

80% {
    top:-377px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

@-webkit-keyframes fourth_num {
60% {
    top:-377px;
}

80% {
    top:-377px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

@keyframes fourth_num {
60% {
    top:-377px;
}

80% {
    top:-377px;
}

95% {
    top:0;
}

100% {
    top:0;
}
}

  #wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:143px;
display:block;
margin:0 auto 35px;
}

Answer 1

主要问题是keyframes部分需要从0％-100％而不是60％-100％运行。我发现使用from和to块代替百分比是获得平滑一致动画的最简单方法。

此外，我删除了infinite重复并重新添加了animation-fill-mode:forwards的三种风格。 （在Chrome和IE中测试过）

小提琴：http://jsfiddle.net/hzNad/

#wrapper_founded {
position:relative;
width:100%;
float:left;
}

#wrapper_founded h3 {
padding:0 60px;
}

#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;

}

#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}

 #wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:first_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:first_num 6s ease-in-out;
animation-fill-mode:forwards;
}

@-moz-keyframes first_num {
    from {top: 0px;}
    to {top: -61px;}
}

@-webkit-keyframes first_num {
    from {top: 0px;}
    to {top: -61px;}
}

@keyframes first_num {
    from {top: 0px;}
    to {top: -61px;}
}

  #wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:second_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:second_num 6s ease-in-out;
animation-fill-mode:forwards;
}

@-moz-keyframes second_num {
    from {top: 0px;}
    to {top: -250px;}
}

@-webkit-keyframes second_num {
    from {top: 0px;}
    to {top: -250px;}
}

@keyframes second_num {
    from {top: 0px;}
    to {top: -250px;}
}

  #wrapper_founded #date_anim span#third_num {
-moz-animation:third_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:third_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:third_num 6s ease-in-out;
animation-fill-mode:forwards;
}

@-moz-keyframes third_num {
    from {top: -381px;}
    to {top: 0px;}
}

@-webkit-keyframes third_num {
    from {top: -381px;}
    to {top: 0px;}
}

@keyframes third_num {
    from {top: -381px;}
    to {top: 0px;}
}

  #wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:fourth_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:fourth_num 6s ease-in-out;
animation-fill-mode:forwards;
}

@-moz-keyframes fourth_num {
    from {top: 0px;}
    to {top: -377px;}
}

@-webkit-keyframes fourth_num {
    from {top: 0px;}
    to {top: -377px;}
}

@keyframes fourth_num {
    from {top: 0px;}
    to {top: -377px;}
}

  #wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:140;
display:block;
margin:0 auto 35px;
}