如何使用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

回答

相關問題