css动画

在Web上面，动画可以通过css动画，dom动画(setTimeout等)，以及canvas动画等形式。实际上，css动画有很多优势：

1、不用写js代码，开发效率最高

2、不占用js线程执行时间，保证页面流畅

3、尽可能地用到了浏览器自身的优化机制，渲染效率高

 

主要用于css动画的属性有三个：

1、transition: 它用于监控某些属性，但这些属性出现变化的时候，用户可以自己控制希望出现的转变动画过程；

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_transitions

2、animation：它实现动画的方式，是指定某些帧瞬间的状态（如from, 50%, to等），以及动画的时间长度。这样就明确规定了动画的路径和时间。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

3、transform：