会写动画的前端才是好开发（一）

动画是通过把某一动态过程分解后，画成许多动作瞬间的画幅，再用摄影机连续拍摄成一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在 0.34 秒内不会消失。

利用这一原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。相信很多人都看过动画片，或者手翻书，其实它们与电视、电影的原理都是一样的。

动画如何实现

1. Javascript 直接实现动画；
2. css3 动画中的 transition 和 animation；
3. Canvas 动画；
4. SVG（可伸缩矢量图形）；
   

1. Javascript 直接实现动画

Javascript 直接实现动画，主要是通过 setInterval 或 setTimeout 方法的回调函数来持续调用改变某个元素的 CSS 样式以达到元素样式变化的效果，或者使用 requestAnimationFrame；
示例：

上面示例的效果是一个灰色的小方块，慢慢的从左边，移动到屏幕右边的动画，每隔 16ms 就把方块的左外边距增加 1px。尽管过程看起来很连贯，但是这种方法依然存在一些问题。

因为 JavaScript 是单线程的，setTimeout 是异步操作，加入任务队列后，当 js 引擎线程中同步代码执行完才会从任务队列中取出执行，可能发生阻塞。另外 setTimeOut 会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器，而且不同浏览器对 setTimeOut 的解析也是不同的，导致同一动画在不同浏览器下效果不一致，在移动端上使用会有明显的卡顿。

requestAnimationFrame 实现动画的优点是可以避免不必要的过度重绘，但是整体性能和可调节性都不如 css3 动画。

2. css3 实现动画

Transition

Transition 可以实现过渡动画的效果，但是 transition 并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。 transition 抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画，不支持自定义中间的状态。可以设置发生变化的 css 属性，默认为 all，则所有变化的属性都会在触发时，以动画的形式展现出来。如果把 transition 和 transform 配合使用，对元素进行平移、倾斜、缩放，使动画更加丰富生动。

transition 语法如下：
transition:property duration timing-function delay;

具体属性值介绍如下：

示例：

Animation

Animation 算是真正意义上的 CSS3 动画。使用 animation 属性制作动画可以更加灵活的设置动画，通过对关键帧及其状态以及循环次数的控制，页面元素会在对应的时间按照设定好的样式改变进行平滑过渡。不过区别于 Transition，Animation 作用于元素本身而不是样式属性，不局限于只有初始状态和结束状态，可以实现更自由的动画效果。

animation 语法如下：
animation: nameduration timing-function delay iteration-count direction;

具体属性值介绍如下：

关键帧定义：

示例：
大风车
华语群星 - 央视“启航 2016”跨年晚会

感兴趣的小伙伴请看这里（如无法打开，请复制链接到浏览器）：
http://www.cnblogs.com/yingzi1028/p/7768595.html

使用 CSS3 transition 和 animation 实现动画，它最大的优势是摆脱了 js 的控制，并且能利用硬件加速以及实现复杂动画效果，但是会存在浏览器兼容性问题。

本转载自 Think 体验设计公众号。

原文链接： https://mp.weixin.qq.com/s/iFs4d7XDcoLA3ZweWMpdwQ