H5动画

前言
前一段时间被各种H5总结刷屏，除了内容以及设计之外在动画方面在其表现方面也起到了很大的加持作用，渐渐的动画也成为了一个产品所不可缺少的一个元素。2017年1月11号早读文章由凹凸实验室@Avin授权分享。

正文从这开始～

动画，是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。

在 Web 开发中，经常需要实现各种动画效果，例如：移动、变形、透明度变化等，今天我们主要来讨论各种移动的实现。
直线移动

640?wx_fmt=png&wxfrom=5&wx_lazy=1
straight-line

通常可以直接由各个点的位置，以及到点的时间与整个动画持续时间的比值，写出类似下面的代码并可实现动画。

.cray {
animation: move 2s alternate infinite;
}
@keyframes move {
0% { transform: translate(0, 0); }
30% { transform: translate(100px, 0); }
60% { transform: translate(100px, 100px); }
100% { transform: translate(200px, 0); }
}

曲线移动
0?wx_fmt=pngcurve

在 CSS 中可以通过 transform-origin 配合 rotate 实现曲线移动，不过这种 曲线 都是圆的一部分且不太好控制。

这种移动我们可以把它拆分成两个方向的运动叠加，如
0?wx_fmt=gifcurve-gif

更详细的说明可以参考这篇文章 《curved-path-animations-in-css》。
路径移动
0?wx_fmt=pngpath

这也是曲线移动，但是想像上面那样，这个很难拆分成几个方向的运动叠加。这样的移动路径可以尝试以下几个方法：

SVG Animation

这样的路径可以比较好的用 SVG path 来描述，然后使用 SVG Animation 做跟随动画，并可以达到预期的轨迹效果。

主要代码（在线示例）：