在循環結束時停止動畫

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