Web动画形式

背景

对于Web开发者来说，不管什么细分方向，比如数据可视化、网站系统、电商网站等等，都会涉及到一个难题“动画”。
因为动画关系到Web开发的两个比较重要的点，一是视觉效果，二是用户体验，通过酷炫动画效果可以给视觉加不少分，同样，恰到好处的微动效也会给用户体验带来不错的惊喜，基于此，我们的Web动画该如何实现，他有哪些实现方式呢？

动画形式

大概梳理了下，动画有不止以下几种形式：
一、CSS3动画
二、JS动画
三、Canvas动画
四、SVG动画
五、以Three.js为首的3D动画
针对以上动画形式，我们来简单介绍下吧。

一、CSS3动画

CSS3动画是我目前工作中用到最多的动画形式，因为它书写简单，性能好，不需要懂JavaScript也能写动画，甚至可以实现一些三维立体效果。
CSS3动画又包含几种，比如，transform，transition，animation。

Transform（变形）

transform变包含了rotate（旋转）、scale（缩放）、translate（移动）、skew（扭曲）以及matrix（矩阵变形）。
我们一般会结合transition来使用，使元素变形的过程变的平滑。

Transition（过渡）

CSS3中的transition是让元素的属性值在一定时间区间内平滑过渡，还可以定义变换速率。不是所有的属性都支持过渡的，或者说有很多属性都支持过渡，所以最好还是了解下，没准下次我们就能创造不一样的动画效果了呢！

属性名称	类型
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percen