这些特性在写这篇文章的时候还没有在任何的浏览器得到稳定的支持。但是，接下来要讨论的内容在Firefox Nightly中得到了支持，而且关键部分在Chrome Canary（开启Web实验性特性），所以我建议使用这些浏览器中的一个（在阅读本文时）。

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的，只是想把这种技术阐述的更简易些。所以，在这里我用我的方式把这种技术再次向大家阐述一遍。

今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生 —— 网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS的transition来完成。注意，这个技术还是实验性的。

在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoffset的值为0就可以实现线条自画的一个动画效果。原理很简单，但在上一篇文章中，看到的仅是一条路径（也就是一条线的自画效果），如果我们想对一图形进行依次自动动效呢？其实也是可以实现的。今天我们在这篇文章中就来学习一下，怎么实现。

在我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章，因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。

我一直在做一个网站，这个网站主要用来向用户展示大型图片。我没有创建一个典型的Lightbox效果，而是尝试让一些交互效果更有意思。最后的效果是我在一个容器上添加了一个效果，当用户把鼠标悬浮在图片（用户鼠标移动图片上）时，它会倾斜（鼠标移动到不同的角度时，向不同的方向倾斜）。

这篇文章希望通过7个GIF图例来证明动效设计并不复杂，只需在关键之处增加一点点变化，就能让效果大大提升一个境界。通过这些范例，你会发现状态连续性、元素关联性，以及用户注意力控制的重要性。在做动效设计中，我参考的设计规范有：Material Motion、IBM’s Animation Principles、The UX in Motion Manifesto。

本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。以及，相关的动画的矩阵知识，这个也是现在 CSS 动画里面最重要，同时也是最为欠缺的知识点。文章会先从基本语法入手，然后，慢慢深入。介绍一些动画基本原理和对应的数学原理知识点。并且文章后面，还附有相关语法的介绍，当你在遇到不熟悉语法的时候可以参考参考。

在这篇文章中，将使用三角函数的基本概念，重新创建一个更平滑的Loading效果。我知道这听起来很奇怪，但请相信我，这里一定会很有趣。你会惊讶地发现，要编写的代码很少。当然，你可能会担心三角函数相关的知识，事实上是你不需要知道三角学或数学你能理解这篇文章。我将会解释这里的每个圆相关的事情。