絕對定位一個CSS3關鍵幀動畫

http://jsfiddle.net/Wdrgv/絕對定位一個CSS3關鍵幀動畫

所以我想把這個壞的動畫在屏幕的底部。很簡單，對嗎？

沒有。當我將position: absolute放在marquee-container上時，動畫似乎從屏幕上消失。

我想我在這裏做的事情真的很愚蠢，但我看不到什麼。

來源

2012-06-19 Hello71

我能夠通過將absolute更改爲fixed並將bottom:0px;應用於此工作來實現它。

在這裏看到：http://jsfiddle.net/Wdrgv/1/

來源

2012-06-19 22:31:45

唉。非常哈克解決方案。 – Hello71

無論如何，你爲什麼要「絕對」？難道你不希望它始終卡在底部嗎？ –

嗯，它的工作原理，但我仍然想知道它爲什麼。 – Hello71

的問題是，當你申請的絕對定位的容器，'display: block;不再它延伸到其容器的寬度的100％，因爲它沒有相對定位的內容來定義它的尺寸，它完全依賴明確定義的值（height: 24px），或者如果不存在，則爲零。我通過爲您的包含元素定義width: 100%來解決您的問題。我還添加了一些調整，使您的滾動字幕的大小和行爲有點更強大的給出不同的文本長度：

http://jsfiddle.net/Wdrgv/2/

來源

2012-06-19 22:42:01 Aaron

Hm開始。不錯，但是如果它比頁面長，它似乎並不顯示所有的文字。 – Hello71

[試試這個]（http://jsfiddle.net/Wdrgv/5/）。我添加了一段Javascript來確定「軌道」需要多長時間才能讓包含的文本在每個動畫週期中在整個頁面上循環一次。 – Aaron

絕對定位一個CSS3關鍵幀動畫

回答

相關問題