在循环结束时停止动画

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