可憐的CSS背景動畫

所以我一直一個簡單的啓動頁今天工作的應用我的工作可憐的CSS背景動畫

我希望把移動背景（視差式的）使用一些CSS動畫如下所示
http://css-tricks.com/parallax-background-css3/

我通過webkit的animate函數

這裏使用關鍵幀中配置背景位置移動是一個示例

#BigWrapper{ 
    -webkit-animation-name: MOVE; 
     transform: translate3d(0, 0, 0); 
     -webkit-transform: translate3d(0, 0, 0); 
     -webkit-animation-duration: 250s; 
     -webkit-animation-timing-function: linear; 
     -webkit-animation-iteration-count: infinite; 
    } 
    @-webkit-keyframes MOVE { 
    from { 

    background-position: 5% 5%; 

    } 
    to { 
     background-position: 1300% 600%; 
    } 
    }

這產生了相當差的表現。背景圖片是png32，透明度爲，壓縮爲896kb。我嘗試使用空白translate3d語句啓動硬件加速，但沒有發生可見的變化。

我也嘗試將背景位置改爲translate3d，並將整個 div與其包含的內容一起移動。我不知道如何產生這種效果沒有性能點擊。

這裏是測試現場www.auroragm.sourceforge.net

來源

2012-04-15 Sammy Guergachi

原來我所要做的就是告訴瀏覽器停止，每次有更新，這顯然幫助了很多緩存：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

的伎倆:)

來源

2012-05-28 16:17:28

該網站運作得非常好，在我的目的，使用Firefox或Chrome在Linux上。

您正在測試哪個瀏覽器？也許IE對反應大背景圖片的反應不佳。

考慮限制某些瀏覽器的背景動畫。

此外，請考慮使背景圖像稍微變暗 - 背景中移動的對比色會淹沒焦點。

來源

2012-04-15 07:31:21

感謝反饋。我認爲限制操作系統是我會做的，顯然IE9和iOS是有問題的。我也會讓背景變暗，我也覺得它太過分了。 :) – 2012-04-15 14:46:59

在Windows XP中使用Chrome和Firefox進行測試可以獲得良好的性能，但您的Tile.png和BlurBG.png似乎都具有相當大的尺寸。至於我，我會將Tile.png和BlurBG.png結合成一個文件，因爲Tile.png看起來並不像移動BlurBG.png背後的靜態背景。

但是，如果你想保持它作爲單獨的兩個文件，你可能想要更多地減小文件大小。我個人的工具是PNGoo。

來源

2012-04-15 09:34:05 deathlock

謝謝！我想我期待着流暢的表演，但我會嘗試將這兩個文件結合起來，看看它是否會提升性能。我想瓷磚是分開的，因爲它加載速度比BlurBG快，並且當您在等待BlurBG加載時加載站點時，您不會看到白頁。我還使用了一個PNG壓縮器，將5MB BlurBG減少到900kb，這非常好。但我會檢查PNGoo謝謝！ – 2012-04-15 14:50:19

我沒有比較性能，但也許你可能想檢查Lea Verou的CSS3碳纖維圖案> http://lea.verou.me/css3patterns/#carbon-fibre :)通過修改數字爲35％（而不是的15％），它會看起來類似於你的Tile.png，但只需要6行代碼。雖然不幸的是它在舊版瀏覽器中不被支持。 – deathlock 2012-04-16 11:28:01

我懷疑這真的會有幫助。我很確定，最大的問題是運動圖像，而不是在移動背景開始移動之前呈現的Tiles.png。我正在尋找一種更有效的方式來動畫移動背景 – 2012-04-18 00:12:41

可憐的CSS背景動畫

回答

相關問題