js控制3d动画样式_Web前端人员应该知道的3种前端动画效果的实现方式

合适的动画不仅更能吸引人们的眼球，也能让你的应用体验更为流畅，而将动画的效果做到极致，才能让用户感到使用你的应用是一种享受，而不是觉得生硬和枯燥。那么Web前端人员是否了解各种前端动画效果实现方式的异同，具体应用中又是如何实现的呢?下面就让我们一起来看一看吧~

一、JavaScript 动画

因为没有其它可用的实现方式，最初的前端动画都是JS来实现，实现上就是通过一个定时器setInterval 每隔一定时间来改变元素的样式，动画结束时clearInterval即可。早期的类库包括 jquery、prototype、mootools 等等都是这种方式。

尽管这种方式动画的可控性很强，但是问题也很明显：

· 性能不佳，因为需要不断获取和修改Dom的布局，所以导致了大量页面重排(repaint)

· 缺乏标准，不同的库使用了不同的API，导致即使是简单的动画也有各不相同的实现方式，调整起来比较耗时

· 带宽消耗，相对丰富的动画库代码量都很大，结果就是增加了http请求的大小，降低了页面的载入时间

二、CSS3 动画

css3 加了两种动画的实现方式，一种是 transition， 一种是 animation。

transition 包含4种属性：tran