Css 带-Webkit动画的Webkit内存限制

使用

-webkit动画时，我面临内存问题

原则

我想设置渐变背景的动画。由于它们在关键帧中不可设置动画，我将每个背景放在不同的
div
，我正在玩那些
div
不透明度和
z-index
：


.item01
在0%到4%之间可见，在0%时开始淡出
.item02
从0%到8%可见，在4%时开始淡出（在
.item01
下）
.item03
从0%到12%可见，在8%时开始淡出（在
.item02
下）


问题

只有前16个动画可以工作，17日我们只看到一个空白div，直到所有动画重新启动

我注意到我使用
-moz动画和Firefox没有问题，问题只发生在Chrome上，使用
-webkit-

根据视口的大小，您可以看到更多或更少的动画

代码

HTML

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

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

编辑

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


显示的动画数量取决于您的操作系统（Ubuntu似乎比Win7有更好的效果）
显示的动画数量取决于视口大小
我认为解决方案是只有两个div，每个div都有一个动画

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

第二个div的动画也一样，但是对于均匀的背景，我认为解决方案是只有两个div，每个div都有一个动画

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

第二个div的动画也有同样的效果，但在背景均匀的情况下，这确实是一个webkit错误，已经多年不存在了。
这确实是一个webkit错误，已经多年不存在了。
在my Chromium（Ubuntu存储库提供的最新版本）中，这是可以的。没有16的限制。查看详细信息，我们发现它取决于您的视口大小。它越大，极限就越低。应该是Chromium的内存问题。在MyChromium（可从Ubuntu存储库获得的最新版本）中，它还可以。没有16的限制。查看详细信息，我们发现它取决于您的视口大小。它越大，极限就越低。应该是内存问题。
<div class="item item-01">ITEM 01</div>
<div class="item item-02">ITEM 02</div>
<div class="item item-03">ITEM 03</div>
...

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