前端常用的动画实现方式有以下种：
- css3的
transition属性 - css3的
animation属性 - 原生JS动画
- 使用
canvas绘制动画
1.css3的transition
transition:1s; 等价于 transition: all 1s ease 0;
其中timing-function的值有如下：
| 值 | 描述 |
|---|---|
| linear | 匀速（等于 cubic-bezier(0,0,1,1)） |
| ease | 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 慢慢变快（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out | 慢慢变慢（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值 |
例子：
transition-property: width, height, background-color, border-width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
transform 转变动画
包含四个常用的功能：
- translate：位移
- scale：缩放
- rotate：旋转
- skew：倾斜
一般配合transition过度使用
transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
3.css3的animation
animation属性与transition属性的区别：
transition只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制,你不用管它。animation可以对动画过程中的各个关键帧进行设置
| transition（过度） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 |
|---|---|
| transform（变形） | 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” |
| translate（移动） | 只是transform的一个属性值，即移动 |
| animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 |
3. 原生JS动画
4. 使用canvas绘制动画
总结：
- 代码复杂度方面简单动画：
css代码实现会简单一些，js复杂一些。 复杂动画的话：css代码就会变得冗长，js实现起来更优。 - 动画运行时，对动画的控制程度上
js比较灵活，能控制动画暂停，取消，终止等css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。 - 兼容方面
css有浏览器兼容问题js大多情况下是没有的。 - 性能方面
css动画相对于优一些，css动画通过GUI解析js动画需要经过js引擎代码解析，然后再进行GUI解析渲染。
CSS动画和JS实现的动画分别有哪些优缺点？
CSS动画
优点
- 浏览器可以对动画进行优化
- 代码相对简单,性能调优方向固定
- 对于帧速表现不好的低版本浏览器，
CSS3可以做到自然降级，而JS则需要撰写额外代码
缺点
- 运行过程控制较弱,无法附加事件绑定回调函数
- 代码冗长，想用
CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重
JS动画
优点
- 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
- 动画效果比
css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成 CSS3有兼容性问题，而JS大多时候没有兼容性问题
缺点
- 代码的复杂度高于
CSS动画 JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况
