使用CSS從右向左滾動的圖像

Question

我有一個包含10張圖像的DIV。我想在這個DIV中從右向左滾動這個圖片而不使用JavaScript。可能嗎？

在此先感謝。

Answer 1

簡短的回答是：不，你不能用純CSS做動畫，至少現在還不行。 CSS動畫和轉換已經出現，但尚未標準化，也沒有得到廣泛的支持，使它們值得使用。

但是，這麼說，你應該看看這個：用什麼，但標準的CSS

http://www.romancortes.com/blog/pure-css-coke-can/

一個聰明的滾動/滾動效果。沒有Javascript，沒有CSS動畫或轉換。非常非常聰明。它甚至可以在IE8中工作。

當然，它使用一些非常偷偷摸摸的CSS技巧來實現這一點，所以它不是你每天使用的代碼技術。但是問題是「這有可能嗎？」，而不是「沒有過分聰明和黑客就可能嗎？」

Answer 2

不，因爲它現在CSS不能處理動畫。你需要包含一些JavaScript來爲你處理。雖然目前的框架爲你做了所有重要的工作，但它並不像你想像的那麼複雜。我個人推薦jQuery http://jquery.com/，但也有其他人。還有誰像解決你的問題，並創建插件，你應該能夠拖放到你的網站的人給了你所需要的功能，如果你不能確定自己創造它http://plugins.jquery.com/

編輯

我應該補充一點，雖然有些CSS動畫是可能的，但在某些瀏覽器中不支持。

Answer 3

http://www.the-art-of-web.com/css/css-animation/

感謝谷歌的搜索:)

像上面的評論說，這是CSS3所以你的支持有限的瀏覽器

Answer 4

有可能通過使用其中的轉變是一個CSS3功能，所以它在IE中不起作用。它確實在ff3.6 +和chrome不知道重置瀏覽器的情況下工作，因爲我沒有時間去測試它們。

https://developer.mozilla.org/en/CSS/CSS_transitions

Answer 5

嘛，你只要給包含固定width圖像該分區，並通過CSS設置whitespace: no-wrap。然後，只需將overflow: auto添加到div，那就應該是。