0

この CSS3 を使用して、シンプルな水平ニュース ティッカーを作成しています。

transition: right 13s linear 0ms

これは Webkit では問題なく動作しますが、Firefox では 13 秒間は問題なく動作し、その後停止します。

Webkit はスクロールを無限に続けるのに、gecko はそうしないのはなぜですか?

編集：これはスタンドアロンの例です

http://alexcrooks.me/others/newstest/

編集:これは現在修正されています。以下の私の回答を参照してください。とにかく見てくれた人に感謝します。

4

2 に答える 2

1

0msデフォルトではすでに0になっている遅延であるため、値は必要ありません。

13sは持続時間なので、明らかに 13 秒後に停止します。それは永遠に繰り返されるべきではありません！なぜそれがWebkitで行われるのかを理解するには、さらに詳細が必要です（完全なコード、ブラウザ、およびテストしているバージョン）。

アニメーションが必要です。以下に少し例を示します。

@-webkit-keyframes scroller { /* webkit */
    0% {
        left: 0;
    }
    100% {
        left:-100%; /* adjust it to your needs */
    }
}
@-moz-keyframes scroller { /* gecko */
    0% {left: 0;}
    100% {left:-100%;}
}
@-ms-keyframes scroller { /* IE10 */
    0% {left: 0;}
    100% {left:-100%;}
}
@keyframes scroller { /* W3C and future browsers */
    0% {left: 0;}
    100% {left:-100%;}
}

.yourElementClass {
    -webkit-animation-name: scroller;
    -webkit-animation-duration: 13s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite; /* set loop */
    -webkit-animation-direction: alternate; /* read below */
    -moz-animation-name: scroller;
    -moz-animation-duration: 13s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;   
    -moz-animation-direction: alternate;       
    -ms-animation-name: scroller;
    -ms-animation-duration: 13s;
    -ms-animation-timing-function: linear;
    -ms-animation-iteration-count: infinite;    
    -ms-animation-direction: alternate;
    animation-name: scroller;
    animation-duration: 13s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;    
    animation-direction: alternate;
}

わかりやすくするために各プロパティを個別に宣言しましたが、省略形の構文を使用することもできますanimation:scroller 13s linear infinite alternate;(明らかにベンダー プレフィックスを使用します)。

さて、何かについてanimation-direction。に設定するとalternate、アニメーションの終了後に逆方向に実行されるため、スムーズな効果が得られます。

必要なものでない場合は、設定しないでください ( animation:scroller 13s linear infinite;)。デフォルト値が使用されます: normal。13 秒後には、最初から開始されます。

于 2012-09-26T09:23:53.177 に答える
0

問題を修正しました。私が行った変更は次のとおりです。

setTimeout(function() {
    eltape.css({"webkitTransitionDuration":dur+'s', "mozTransitionDuration":dur+'s', "oTransitionDuration":dur+'s', "transitionDuration":dur+'s'});
    eltape.css({right:0+'px'});
}, 1);

(タイムアウトミリ秒を 0 ではなく 1 に変更)

widths['seg'+$(this).attr('seg')] += $(this).outerWidth(true);
widths.total += $(this).outerWidth(true);

(outerWidth に TRUE を追加して、余白とパディングを調べます)

すべてがうまく機能しています！

http://alexcrooks.me/others/newstest/

于 2012-09-26T10:45:49.113 に答える