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

我面临内存问题,使用 -webkit-animation .

道德原则

我想制作渐变背景的动画。由于它们在关键帧中不可设置动画,我将每个背景放在不同的 div ,我在玩这些 分区 不透明性和 z-index :

• .item01 从0%到4%可见,从0%开始淡出
• .item02 从0%到8%可见,在4%(及以下)时开始淡出 .第01项 )
• .item03 从0%到12%可见,在8%(及以下)时开始淡出 .第02项 )
• ...

问题

只有16个第一个动画可以工作,在17日,我们只看到一个空白的div,直到所有动画重新启动。

我注意到我在使用时没有问题 -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;} }
...

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

有什么方法可以让这个代码工作吗?

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

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