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 回答
0

不确定这是否是你想要的

http://jsfiddle.net/rVAtz/3/

@-webkit-keyframes prop-600 {
    0% {
        -webkit-transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(-100px);
    }
}
于 2013-04-30T11:59:43.500 回答