Webkit 内存限制与 -webkit-animation答案

【问题标题】：Webkit memory limit with -webkit-animationWebkit 内存限制与 -webkit-animation
【发布时间】：2013-10-28 13:38:12
【问题描述】：

我遇到了内存问题，使用 -webkit-animation。

原则

我想为渐变背景设置动画。由于它们在关键帧中不可动画化，因此我将每个背景放在不同的 div 中，并且我正在使用 div opacity 和 z-index ：

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

问题

只有前 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 有更好的结果）
显示的动画数量取决于您的视口大小

【问题讨论】：

在我的 Chromium（Ubuntu 存储库中提供的最新版本）中是可以的。没有 16 个限制。
寻找细节，我们发现这取决于您的视口大小。它越大，限制越低。应该是 Chromium 内存问题。

标签： css animation webkit

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

第一个 div 的动画加载一个背景，过渡到 opacity 0，改变背景，过渡到 opacity 1，到 oapcity 0，改变背景等等。

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

【讨论】：