如何使用CSS3

CSS做持续转化效果：如何使用CSS3

.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来达到这种效果。

任何人都可以帮助我。在此先感谢

来源

2013-04-30 Priya Sunanthan

所以，你基本上希望它只是滑出视图，不会再出现？ – Sacha 2013-04-30 11:53:52

我给了图像的重复-X，并且想要在一个方向上滑动图像而不停止 – 2013-04-30 12:07:12

这里有没有transform秒。删除所有变换/过渡性质，并使用此：

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

我用，您可以使用setTimeout。小提琴：http://jsfiddle.net/rVAtz/10/

来源

2013-04-30 12:48:34 Novelist

非常感谢你 – 2013-04-30 12:54:27

这个作品有一次我想要无限次，我该如何实现这个@moredemons – 2013-05-02 04:45:06

有这方面的特殊属性，但我忘了它。所以，你也可以只是建立动画，如：

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-30 11:53:32 Novelist

我想要朝相同的方向移动。 – 2013-04-30 12:03:18

@PriyaSunanthan，嗯...所以，你为什么要使用css-animation definetly？你为什么不把“持续时间”和“翻译”设置为任何大的值？ – Novelist 2013-04-30 12:07:16

我还可以用JavaScript也。我怎样才能达到这个使用设定的时间 – 2013-04-30 12:09:03

不知道这是你希望的东西

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

@-webkit-keyframes prop-600 { 
    0% { 
     -webkit-transform: translateX(0px); 
    } 
    50% { 
     -webkit-transform: translateX(-100px); 
    } 
}

来源

2013-04-30 11:59:43

如何使用CSS3

回答

相关问题