0

次のコードは、アニメーションを最初のフレームにリセットして繰り返します。何らかの理由animation-fill-mode:forwards;で動作していません。

それがピクセルと関係があるのか​​ 、それとも上部マージンと関係があるのか​​ はわかりません。

これが私のコードへのリンクです。http://jsfiddle.net/HGHiQ/

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

1 に答える 1

1

主な問題は、keyframesセクションを 60% ～ 100% ではなく 0% ～ 100% で実行する必要があることです。fromパーセンテージの代わりにandブロックを使用するとto、滑らかで一貫したアニメーションを作成する最も簡単な方法であることがわかりました。

また、infiniteリピートを外して の3つのフレーバーを再度追加しました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;
}
于 2013-04-27T06:22:47.810 に答える