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

   <p>怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。</p>    <p>废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。</p>    <h2>正负旋转相消</h2>    <p>嗯。名字起的很奇怪，好像数学概念一样。 <img src="https://simg.open-open.com/show/fb8e87329fc366c1d4c188a5977a236f.png"></p>    <p>（写完文章才发现这里应该叫 <strong>正反旋转相消，</strong> 图都截完了，大家心里清楚就好）</p>    <p>在动画中，旋转是非常常用的属性，</p>    <pre>  <code class="language-css">{    transform: rotate(90deg);  }</code></pre>    <p>那旋转有一些什么高级点的技巧呢？当然是可以改变  transfrom-origin ，改变旋转中心点啦。</p>    <p><img src="https://simg.open-open.com/show/16807400f2e8237656d08922af037a68.png"></p>    <p>开个玩笑，改变旋转中心点这个估计大家都知道了，这里要介绍的技巧是利用父级元素正反两个方向的旋转，来制作一些酷炫的 3d 效果。</p>    <p>首先假设一下场景，我们有这样的一层 HTML 结构：</p>    <pre>  <code class="language-css"><div class="reverseRotate">      <div class="rotate">          <div class="content">正负旋转相消3D动画</div>      </div>  </div></code></pre>    <p>样式如下：</p>    <p><img src="https://simg.open-open.com/show/ff1b44bf9cf3f329951864e8a1c7a56b.png"></p>    <p>.content 内是我们的主要内容，好了，现在想象一下，如果祖先元素  .rotate 进行正向 linear 360° 旋转，父级元素  .reverseRotate 进行反向 linear 360° 旋转，效果回是啥样？</p>    <p>CSS 代码如下：</p>    <pre>  <code class="language-css">.rotate {      animation: rotate 5s linear infinite;   }    .reverseRotate {      animation: reverseRotate 5s linear infinite;   }    @keyframes rotate {      100% {          transform: rotate(360deg);      }  }    @keyframes reverseRotate {      100% {          transform: rotate(-360deg);      }  }</code></pre>    <p>神奇！因为一正一反的旋转，且缓动函数一样，所以整个  content 看上去依然是静止的！注意，这里整个  content 静止的非常重要。</p>    <p>有读者看到这里就要骂街了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？</p>    <p><img src="https://simg.open-open.com/show/16c14c153a6c335ed716879a7ecfcbd5.png"></p>    <p>别急！虽然看上去是静止的，但是其实祖先两个元素都是在旋转的！这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的：</p>    <p><img src="https://simg.open-open.com/show/e60065fe1bff00e433fd9489b761304f.gif"></p>    <p>既然如此，我们继续思考，如果我在其中旋转的一个祖先元素上，添加一些别的动画会是什么效果？想想就很刺激啊。 <img src="https://simg.open-open.com/show/4df1dcb481fa46ef9262dc7b6804e44d.png"></p>    <p>为了和文案里面的 3D 动画扯上关系，我们先给这几个元素添加 3D 转换：</p>    <pre>  <code class="language-css">div {      transform-style: preserve-3d;      perspective: 500px;  }</code></pre>    <p>接着，尝试修改上面的旋转动画，在内层旋转上额外添加一个 rotateX：</p>    <pre>  <code class="language-css">@keyframes rotate {      0% {          transform: rotateX(0deg) rotateZ(0deg);      }      50% {          transform: rotateX(40deg) rotateZ(180deg);      }      100% {          transform: rotateX(0deg) rotateZ(360deg);      }  }</code></pre>    <p>效果如下：</p>    <p><img src="https://simg.open-open.com/show/4968d993d75469a20fe01619a14b2282.gif"></p>    <p>Wow，这里需要好好理解一下。由于内容  content 层是静止的但其实外层两个图层都在旋转，通过设置额外的  rotateX(40deg) ，相当于叠加多了一个动画，由于正反旋转抵消了，所有整个动画只能看到旋转的  rotateX(40deg) 这个动画，产生了上述的效果。</p>    <p><a href="/misc/goto?guid=4959751796082532471" rel="nofollow,noindex">CodePen Demo -- Css正负旋转相消动画</a></p>    <h2>动画相同，缓动不同</h2>    <p>好的，继续下一个小技巧。</p>    <p>有的时候我们页面存在一些具有相同动画的元素，为了让动画不那么死板，我们可以给相同的动画，赋予不同的缓动函数，来达到动画效果。</p>    <p>假设我们有如下的结构：</p>    <pre>  <code class="language-css"><div class="container">      <div class="ball ball1"></div>      <div class="ball ball2"></div>      <div class="ball ball3"></div>  </div></code></pre>    <p>样式如下：</p>    <p><img src="https://simg.open-open.com/show/c846124315f32d66acbc7d2e747b53a0.png"></p>    <p>我们给它们相同的动画，但是赋予不一样的缓动函数（animation-timing-function），就像这样：</p>    <pre>  <code class="language-css">.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);      }  }</code></pre>    <p>这样，一个简单的 loading 效果就制作好了。（当然这个技巧比较简单，学会合理运用是关键）</p>    <p><img src="https://simg.open-open.com/show/f4b9078f1ec60215ac596fc07903db97.gif"></p>    <p><a href="/misc/goto?guid=4959751796170714467" rel="nofollow,noindex">CodePen Demo -- 动画相同，缓动不同</a></p>    <h3>奇妙的缓动</h3>    <p>缓动函数 timing-function 在动画中占据了非常重要的地位。</p>    <p>当你不想使用 CSS 默认提供的  linear 、 ease-in 、 ease-out 之类缓动函数的，可以自定义  cubic-bezier(1, 1, 0, 0) ，这里有个非常好用的工具推荐，下面这个网站，可以方便的调出你需要的缓动函数并且拿到对应的 cubic-bezier 。</p>    <p><a href="/misc/goto?guid=4959637431433101601" rel="nofollow,noindex">cubic-bezier.com</a></p>    <h2>过渡取消</h2>    <p>我们在制作页面的时候，为了让页面更加有交互感，会给按钮，阴影，颜色等样式添加过渡效果，配合 hover 一起使用。</p>    <p>这个是常规思维，如果我们的元素一开始是没有过渡效果，只有 hover 上去才给它添加一个过渡，又或者一开始元素是有过渡效果的，当我们 hover 上去时，取消它的过渡，会碰撞出什么样的火花呢？</p>    <p>使用这个技巧（也许算不上技巧，纯粹好玩），我们可以制作出一些有趣的效果，例如下面这个感觉是利用就 JS 才完成的动画，其实是纯 CSS 动画：</p>    <p><img src="https://simg.open-open.com/show/58fd09bb40e829e8912fbb42903c96cc.gif"></p>    <p>其实就小圆圈是元素默认是带有  transition 的，只有在 hover 上去的时候，取消它的过渡，简单的过程：</p>    <ol>     <li> <p>由于一开始它的颜色的透明的，而 hover 的时候会赋予它颜色值，但是由于 hover 时过渡被取消了，所有它会直接显示。</p> </li>     <li> <p>hover 离开的时候，它的原本的过渡又回来了，这个时候它会从有颜色到透明值缓慢渐变消失。</p> </li>    </ol>    <p>可以戳这里感受一下：</p>    <p><a href="/misc/goto?guid=4959751796295301487" rel="nofollow,noindex">CodePen Demo -- Cancle transition</a></p>    <h2>动画层级的控制，保持动画层级在最上方</h2>    <p>这个问题可能有一点难理解。需要了解 CSS 动画渲染优化的相关知识。</p>    <p>先说结论，动画层级的控制的意思是尽量让需要进行 CSS 动画的元素的  z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。</p>    <p>OK，再一次提到了图形层（GraphicsLayer），这是一个浏览器渲染原理相关的知识（WebKit/blink内核下）。</p>    <p><img src="https://simg.open-open.com/show/a7cbe4623dd9ccc6480c5b10d422a8db.png"></p>    <p>简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。在特定方式下可以触发生成一个合成层，合成层拥有单独的 GraphicsLayer。</p>    <p>需要进行动画的元素包含在这个合成层之下，这样动画的每一帧只需要去重新绘制这个 Graphics Layer 即可，从而达到提升动画性能的目的。</p>    <p>那么一个元素什么时候会触发创建一个 Graphics Layer 层？从目前来说，满足以下任意情况便会创建层：</p>    <ul>     <li>硬件加速的 iframe 元素（比如 iframe 嵌入的页面中有合成层）</li>     <li>硬件加速的插件，比如 flash 等等</li>     <li>使用加速视频解码的 元素</li>     <li>3D 或者 硬件加速的 2D Canvas 元素</li>     <li>3D 或透视变换(perspective、transform) 的 CSS 属性</li>     <li>对自己的 opacity 做 CSS 动画或使用一个动画变换的元素</li>     <li>拥有加速 CSS 过滤器的元素</li>     <li>元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)</li>     <li>元素有一个 z-index 较低且包含一个复合层的兄弟元素</li>    </ul>    <p>本题中说到的动画层级的控制，原因就在于上面生成层的最后一条：</p>    <p>元素有一个 z-index 较低且包含一个复合层的兄弟元素。</p>    <p>这里是存在坑的地方，首先我们要明确两点：</p>    <ol>     <li>我们希望我们的动画得到 GPU 硬件加速，所以我们会利用类似  transform: translate3d()  这样的方式生成一个 Graphics Layer 层。</li>     <li>Graphics Layer 虽好，但不是越多越好，每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ，并计算他们下一帧的重绘区域，所以过量的 Graphics Layer 计算也会给渲染造成性能影响。</li>    </ol>    <p>记住这两点之后，回到上面我们说的坑。</p>    <p>假设我们有一个轮播图，有一个 ul 列表，结构如下：</p>    <pre>  <code class="language-css"><div class="container">      <div class="swiper">轮播图</div>      <ul class="list">          <li>列表li</li>          <li>列表li</li>          <li>列表li</li>          <li>列表li</li>      </ul>  </div></code></pre>    <p>假设给他们定义如下 CSS：</p>    <pre>  <code class="language-css">.swiper {      position: static;      animation: 10s move infinite;  }        .list {      position: relative;  }    @keyframes move {      100% {          transform: translate3d(10px, 0, 0);      }  }</code></pre>    <p>由于给  .swiper 添加了  translate3d(10px, 0, 0) 动画，所以它会生成一个 Graphics Layer，如下图所示，用开发者工具可以打开层的展示，图形外的黄色边框即代表生成了一个独立的复合层，拥有独立的 Graphics Layer 。</p>    <p><img src="https://simg.open-open.com/show/df05f686c0c6ca5e46d54317fc525cdd.png"></p>    <p>但是！在上面的图中，我们并没有给下面的  list 也添加任何能触发生成 Graphics Layer 的属性，但是它也同样也有黄色的边框，生成了一个独立的复合层。</p>    <p>原因在于上面那条元素有一个 z-index 较低且包含一个复合层的兄弟元素。我们并不希望  list 元素也生成 Graphics Layer ，但是由于 CSS 层级定义原因，下面的 list 的层级高于上面的 swiper，所以它被动的也生成了一个 Graphics Layer 。</p>    <p>使用 Chrome，我们也可以观察到这种层级关系，可以看到  .list 的层级高于  .swiper ：</p>    <p><img src="https://simg.open-open.com/show/824697b9959aa962ecfae9fa6cff2905.png"></p>    <p>所以，下面我们修改一下 CSS ，改成：</p>    <pre>  <code class="language-css">.swiper {      position: relative;      z-index: 100;  }        .list {      position: relative;  }</code></pre>    <p>这里，我们明确使得  .swiper 的层级高于  .list ，再打开开发者工具观察一下：</p>    <p><img src="https://simg.open-open.com/show/6db11f6dd9f2befef1f02568222c6997.png"></p>    <p>可以看到，这一次， .list 元素已经没有了黄色外边框，说明此时没有生成 Graphics Layer 。再看看层级图：</p>    <p><img src="https://simg.open-open.com/show/fae314c4f6e920f60d8038e0a6087e2f.png"></p>    <p>此时，层级关系才是我们希望看到的， .list 元素没有触发生成 Graphics Layer 。而我们希望需要硬件加速的  .swiper 保持在最上方，每次动画过程中只会独立重绘这部分的区域。</p>    <h3>总结</h3>    <p>这个坑最早见于张云龙发布的这篇文章 <a href="/misc/goto?guid=4959751796379325017" rel="nofollow,noindex">CSS3硬件加速也有坑</a> ，这里还要总结补充的是：</p>    <ul>     <li> <p>GPU 硬件加速也会有坑，当我们希望使用利用类似  transform: translate3d() 这样的方式开启 GPU 硬件加速，一定要注意元素层级的关系，尽量保持让需要进行 CSS 动画的元素的  z-index 保持在页面最上方。</p> </li>     <li> <p>Graphics Layer 不是越多越好，每一帧的渲染内核都会去遍历计算当前所有的 Graphics Layer ，并计算他们下一帧的重绘区域，所以过量的 Graphics Layer 计算也会给渲染造成性能影响。</p> </li>     <li> <p>可以使用 Chrome ，用上面介绍的两个工具对自己的页面生成的 Graphics Layer 和元素层级进行观察然后进行相应修改。</p> </li>     <li> <p>上面观察页面层级的 chrome 工具非常吃内存？好像还是一个处于实验室的功能，分析稍微大一点的页面容易直接卡死，所以要多学会使用第一种观察黄色边框的方式查看页面生成的 Graphics Layer 这种方式。</p> </li>    </ul>    <h2>数字动画</h2>    <p>很多技巧单独拿出来可能都显得比较单薄，我觉得最重要的是平时多积累，学会融会贯通，在实际项目中灵活组合运用，最近项目需要一个比较富有科技感的数字计数器，展示在线人数的不断增加。因为是内部需求，没有设计稿，靠前端自由发挥。</p>    <p>运用了上面提到的一些小技巧，参考了一些 CodePen 上的效果，整了个下述的 3D 数字计数效果，纯 CSS 实现，效果图如下：</p>    <p><img src="https://simg.open-open.com/show/af3e60d7770d26f27b223b0d16cd9e3c.gif"></p>    <p><a href="/misc/goto?guid=4959751796458383136" rel="nofollow,noindex">CodePen Demo -- 3d Number Count</a></p>    <p>这个例子主要是想告诉大家，很多小的细节小的技巧合在一起，是可以作出非常酷炫的动画的。</p>    <h2>最后</h2>    <p>还有一些技巧，感觉本文的信息量已经够大了，所以可能会出个下篇。</p>    <p>系列 CSS 文章汇总在我的  <a href="/misc/goto?guid=4959750404263307362" rel="nofollow,noindex">Github</a> ，持续更新，欢迎点个 star 订阅收藏。</p>    <p>好了，本文到此结束，希望对你有帮助 :)</p>    <p>如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。</p>    <p> </p>    <p>来自：http://www.cnblogs.com/coco1s/p/7443263.html</p>    <p> </p>