带有-webkit-animation的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和Firefox时没有问题，该问题仅发生在使用-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;} }
...

出于示例目的，我将渐变背景替换为简单的红色/蓝色背景。

这里是完整代码的JSFiddle。

使此代码正常工作的任何方式？

编辑我根据最近的发现更新了问题：

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

Answer 1

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

第一个div的动画加载背景，转换为不透明度0，更改背景，转换为不透明度1，更改为不透明度0，更改背景，依此类推。

第二个div的动画效果相同，但是背景是均匀的

Answer 2

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