# 你所不知道的 CSS 动画技巧与细节

# 正负旋转相消

在动画中，旋转是非常常用的属性，

 {
  transform: rotate(90deg);
}

1
2
3

改变 transfrom-origin ，改变旋转中心点啦

利用父级元素正反两个方向的旋转，来制作一些酷炫的 3d 效果。

<div class="reverseRotate">
  <div class="rotate">
    <div class="content">正负旋转相消3D动画</div>
  </div>
</div>

1
2
3
4
5

# 动画相同，缓动不同

有的时候我们页面存在一些具有相同动画的元素，为了让动画不那么死板，我们可以给相同的动画，赋予不同的缓动函数，来达到动画效果。

<div class="container">
  <div class="ball ball1"></div>
  <div class="ball ball2"></div>
  <div class="ball ball3"></div>
</div>

1
2
3
4
5

.ball1 {
    animation: move 1s ease-in infinite alternate;
}

.ball2 {
    animation: move 1s linear infinite alternate;
}

.ball3 {
    animation: move 1s ease-out infinite alternate;
}

@keyframes move {
    100% {
        transform: translateY(5vw);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 奇妙的缓动

当你不想使用 CSS 默认提供的 linear、ease-in、ease-out 之类缓动函数的，可以自定义 cubic-bezier(1, 1, 0, 0)，这里有个非常好用的工具推荐，下面这个网站，可以方便的调出你需要的缓动函数并且拿到对应的 cubic-bezier 。

# 过渡取消

https://codepen.io/Chokcoco/pen/XgvjQM

# 动画层级的控制，保持动画层级在最上方

浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。

需要进行动画的元素包含在这个合成层之下，这样动画的每一帧只需要去重新绘制这个 Graphics Layer 即可，从而达到提升动画性能的目的。

那么一个元素什么时候会触发创建一个 Graphics Layer 层？从目前来说，满足以下任意情况便会创建层：

硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层）
硬件加速的插件，比如 flash 等等
使用加速视频解码的
3D 或者硬件加速的 2D Canvas 元素
3D 或透视变换(perspective、transform) 的 CSS 属性
对自己的 opacity 做 CSS 动画或使用一个动画变换的元素
拥有加速 CSS 过滤器的元素
元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
元素有一个 z-index 较低且包含一个复合层的兄弟元素

这里是存在坑的地方，首先我们要明确两点：

我们希望我们的动画得到 GPU 硬件加速，所以我们会利用类似 transform: translate3d() 这样的方式生成一个 Graphics Layer 层。
Graphics Layer 虽好，但不是越多越好，每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ，并计算他们下一帧的重绘区域，所以过量的 Graphics Layer 计算也会给渲染造成性能影响。