CSS3动画属性

2D效果属性
要使用这些属性，需要通过 transform ，并且，为了保证兼容性，我们可能还需要添加带有浏览器内核前缀的属性，比如 -webkit-transform。
位移属性 translate( x , y )

旋转属性 rotate()

比如rotate( n deg)，n是数字，deg是单位，可以理解为角度，0deg则不旋转。n为正时，顺时针旋转n度，反之，逆时针旋转。
而rotateX和rotateY属性

关键帧动画

仅仅是上面的那些知识，是不能满足对动画效果的要求的，还有个关键的知识点就是关键帧动画。
什么是关键帧动画，可以理解为，可以通过这个对一个动画的过程的每一部分的表现都做出要求。

一个关键帧动画，最少包含两部分，animation 属性及属性值动画的名称和运行方式运行时间等@keyframes

animation 属性可以拆分为当然，一般都写一起
1）animation-name 规定@keyframes 动画的名称。
2）animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3）animation-timing-function 规定动画的速度曲线。默认是 “ease”，常用的还有linear，同transtion 。
4）animation-delay 规定动画何时开始。默认是 0。
5）animation-iteration-count 规定动画被播放的次数。默认是 1，但我们一般用infinite，一直播放。

而@keyframes的使用方法，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置