元素有一个 z-index 较低且包含一个复合层的兄弟元素
本题中说到的动画层级的控制，原因就在于上面生成层的最后一条：
元素有一个 z-index 较低且包含一个复合层的兄弟元素。
这里是存在坑的地方，首先我们要明确两点：
我们希望我们的动画得到 GPU 硬件加速，所以我们会利用类似
transform: translate3d() 这样的方式生成一个 Graphics Layer 层。Graphics Layer 虽好，但不是越多越好，每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ，并计算他们下一帧的重绘区域，所以过量的 Graphics Layer 计算也会给渲染造成性能影响。
记住这两点之后，回到上面我们说的坑。
假设我们有一个轮播图，有一个 ul 列表，结构如下：
<div class="container">
<div class="swiper">轮播图</div>
<ul class="list">
<li>列表li</li>
<li>列表li</li>
<li>列表li</li>
<li>列表li</li>
</ul>
</div>假设给他们定义如下 CSS：
.swiper {
position: static;
animation: 10s move infinite;
}
.list {
position: relative;
}
@keyframes move {
100% {
transform: translate3d(10px, 0, 0);
}
}由于给
.swiper 添加了
translate3d(10px, 0, 0) 动画，所以它会生成一个 Graphics Layer，如下图所示，用开发者工具可以打开层的展示，图形外的黄色边框即代表生成了一个独立的复合层，拥有独立的 Graphics Layer 。<
但是！在上面的图中，我们并没有给下面的
list 也添加任何能触发生成 Graphics Layer 的属性，但是它也同样也有黄色的边框，生成了一个独立的复合层。原因在于上面那条元素有一个 z-index 较低且包含一个复合层的兄弟元素。我们并不希望
list 元素也生成 Graphics Layer ，但是由于 CSS 层级定义原因，下面的 list 的层级高于上面的 swiper，所以它被动的也生成了一个 Graphics Layer 。使用 Chrome，我们也可以观察到这种层级关系，可以看到
.list 的层级高于
.swiper：
所以，下面我们修改一下 CSS ，改成：
.swiper {
position: relative;
