3

CSS:

.horizon {
    position:absolute;
    top:380px;
    width: 1800px;
    height: 50px;
    background: url(images/road.png) repeat-x;
    -webkit-animation-name: prop-600;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-1000px);
    }
}

これは正しく機能していますが、100% になると翻訳が停止し、再び翻訳が開始されます。翻訳を 100% 停止したくありません。止まることなく左から右へと画像が進み続けるようにしたいです。

これがフィドルです：http://jsfiddle.net/rVAtz/

画像の代わりにフィドルで、正方形の要素を指定しました

この効果を得るために、javascript または jquery を使用しても問題ありません。

誰でも私を助けることができますか？前もって感謝します

4

3 に答える 3

1

これには特別な性質がありますが、忘れました。したがって、次のようにアニメーションを作成することもできます。

0% {
  -webkit-transform: translateX(0px);
}
50% {
  -webkit-transform: translateX(-1000px);
}
100% {
  -webkit-transform: translateX(0px);
}

UPD:ここにあります!-webkit-animation-direction: alternate;

フィドル: http://jsfiddle.net/rVAtz/4/と最初の方法http://jsfiddle.net/rVAtz/5/

別のUPD：それで、わかりました。この CSS を正方形に設定します。

-webkit-transition: -webkit-transform 1s linear; /* Or 20s as in your code */
-webkit-transform: translateX(100px);

そして、このjQコードを使用してください：

var position = 100;
(function animateSquare(){
  position -= 100;
  $('.horizon')
  .css('transform','translateX('+position+'px)')
  .one('webkitTransitionEnd',animateSquare);
})();

フィドル: http://jsfiddle.net/rVAtz/6/

これはライブラリなしです（純粋なJS）：

var position = 100,
    horizon = document.getElementsByClassName('horizon')[0],
    binded = false;
(function animateSquare(){
  position -= 100;
  horizon.style.webkitTransform = 'translateX('+position+'px)';
  if (!binded) {
    horizon.addEventListener('webkitTransitionEnd',animateSquare,false);
    binded = true;
  }
})();

フィドル: http://jsfiddle.net/rVAtz/8/

于 2013-04-30T11:53:32.590 に答える
1

ここではtransforms なしです。すべての変換/トランジション プロパティを削除し、これを使用します。

var startTime = +(new Date()),
    horizon = document.getElementsByClassName('horizon')[0];
(function update(){
    var dif = (new Date()).getTime() - startTime;
    dif *= 0.05;
    horizon.style.left = (100 - dif)+'px';
    requestAnimFrame( update, horizon );
})();

私は を使用しますrequestAnimationFrame、あなたは を使用できますsetTimeout。フィドル: http://jsfiddle.net/rVAtz/10/

于 2013-04-30T12:48:34.133 に答える