Webkit内存限制-webkit-动画

Question

我面临一个内存问题，使用-webkit-animation。

原理

我想要制作一个渐变背景。因为它们在关键帧中是不可动的，所以我将每个背景放在不同的div中，我正在播放那些div不透明和z-index：

• .item01从0%到4%可见，从0%开始褪色。
• .item02从0%到8%都是可见的，从4%开始淡出(在.item01下)
• .item03从0%到12%是可见的，从8%开始淡出(在.item02下)
• ..。

问题

只有16个第一个动画能工作，17号我们只看到一个空白的div，直到所有动画重新启动。

我注意到我在使用-moz-animation和火狐时没有问题，问题只发生在使用-webkit-的Chrome上。

根据您的视口大小，您将能够看到或多或少的动画。

码

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;} }
...

为了这个例子，我用简单的红/蓝背景代替了梯度背景。

有办法让这段代码正常工作吗？

编辑

我更新了我的问题，以下是我最近发现的：

• 显示的动画数量取决于您的操作系统(Ubuntu似乎比Win7有更好的效果)
• 显示的动画数量取决于您的视口大小。

Answer 1

这确实是一个webkit错误，多年来不再存在。

Answer 2

我认为解决方案是只有2个div，每个有一个动画。

第一个div的动画加载一个背景，转换到不透明0，更改背景，转换到不透明1，转换到oapity0，更改背景，等等。

第二个div的动画也是一样的，但是有偶数的背景。