Webkit內存限制與-webkit-animation

我遇到內存問題，使用-webkit-animation。Webkit內存限制與-webkit-animation

原理

我想動畫漸變背景。由於他們是不是在關鍵幀動畫，我把每一個背景不同div，並且我與那些打不透明度div和z-index：

.item01是可見的從0％到4％，開始淡出0％
.item02是可見的從0％至8％，起始於4％（和下.item01）
.item03是可見的淡出從0％至12％，開始在8％到淡出（和下.item02）
...

問題

只有16個動畫工作，17日我們剛剛看到一個空白格，直到所有動畫的重新啓動。

我注意到我沒有使用-moz-animation和Firefox的問題，這個問題只發生在Chrome上，使用-webkit-。

根據您的視口大小，您將能夠看到或多或少的動畫。

代碼

HTML

<div class="item item-01">ITEM 01</div> 
<div class="item item-02">ITEM 02</div> 
<div class="item item-03">ITEM 03</div> 
...

CSS

.item { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    opacity: 1; 
} 
.item-01 { 
    background: red; 
    z-index: 100; 
    -webkit-animation: item01 30s linear infinite; 
} 
.item-02 { 
    background: blue; 
    z-index: 96; 
    -webkit-animation: item02 30s linear infinite; 
} 
.item-03 { 
    background: red; 
    z-index: 92; 
    -webkit-animation: item03 30s linear infinite; 
} 
... 
@-webkit-keyframes item01 { 0%, 100% {opacity: 1;} 4%, 99.999% {opacity: 0;} } 
@-webkit-keyframes item02 { 4%, 100% {opacity: 1;} 8%, 99.999% {opacity: 0;} } 
@-webkit-keyframes item03 { 8%, 100% {opacity: 1;} 12%, 99.999% {opacity: 0;} } 
...

對於示例目的，我換成簡單的紅色/藍色的梯度的背景。

以下是完整代碼的JSFiddle。

任何方式來使此代碼工作？

編輯
我更新了我的問題，下面我最近發現：

所示取決於您的操作系統的動畫號（Ubuntu的似乎比Win7的效果更好）
動畫數顯示取決於你的視口尺寸

來源

2013-10-19 zessx

在我的鉻（可從Ubuntu軟件倉庫中最後一個發佈版本）這是確定。沒有限制16. – Waterlink

尋找細節，我們發現它取決於您的視口大小。它越大，限制越低。應該是一個Chromium內存問題。 – zessx

我認爲解決方案是隻有2個div，每個都有一個動畫。

第一個div的動畫加載背景，轉換爲不透明度0，更改背景，轉換爲不透明度1，轉換爲0，更改背景等等。

第二DIV的動畫不相同，但與連背景

來源

2013-10-20 19:43:44 vals

Webkit內存限制與-webkit-animation

回答

相關問題