CSS3 动画
CSS3提供了强大的动画功能，包括transform(变换)、transition(转换)和animation(动画)。这里记录我从论道和网上的学习笔记。
transform主要控制元素进行平面上的二维变换。eg:旋转，缩放，变形。
1、旋转属性:rotate，当旋转的角度为正值时表示顺时针方向旋转，单位为度数(deg)。transform:rotate(120deg);
2、缩放属性:scale，可以对元素按照百分比进行放大和缩小。transform:scale(1.1);
3、偏斜属性:skew,有两个参数，第一个表示按照x轴逆时针偏斜，当为负值的时候表示顺时针偏斜。第二个参数表示y轴顺时针偏斜，当为负数时表示逆时针方向。
4、平移属性:translate,第一个参数为x轴方向的平移距离，第二个参数为y轴方向的平移距离。
多个属性可以同时设置，之间用空格间隔。eg：transform: translate(100px,100px) skew(20px,30px);
transition可以在一个或多个CSS属性改变是自动地展现渐变动画。开始真正支持动画啦啦
。
transition可以分为四个属性:
1、transition-property:指定哪些属性改变时显示transition效果。none表示没有，all表示所有属性，或是用逗号分隔表示需要指定的属性。eg:width , length。
2、transition-duration属性表示转换持续时间，可以设置多个时间，中间用逗号隔开，每个时间跟相应的属性对应。
3、transition-timing-function表示转换动画的效果。有下面可供选择.
Linear:线性渐变
ease:逐渐变慢
ease-in：先慢后快
ease-out:先快后慢
ease-in-out:先慢后快再慢
cubic-bezier:使用贝塞尔曲线指定效果
4、指定动画执行之前需要等待多长时间，不设定时表示马上执行。
举例:当鼠标悬停时盒子旋转
.box:hover{ transform: rotate(30deg); transition: transform 0.5 ease-out;}
animation更接近动画的含义。与想对于transition通过指定属性从起始值到终止值平缓的过渡的效果不同，animation可以设置更多的帧的效果，把这些帧组合、变换按动画的效果显示出来。animation有6个属性:animation-name、animation-duration、animation-delay、animation-timing-function、animation-iteration-count、animation-direction。这里还有类似flash的关键帧的属性keyframe。
keyframe的格式:
@keyframe 动画标识名{//每一帧的效果}
动画标识名被animation的animation-name属性所引用，每一帧通过百分比数值加样式来定义
2
3 background-color:black;
4
5 }
6
7 50%{
8
9 background-color:gray;
10
11 }
12 100%{
13 background-color:white;
14
15 }
百分值看成时间轴的某一点，其实很好理解。
animation-name：对应keyframe，比如animation-name为begin那么动画就对应@keyframe begin。
其他与transition有类似的属性使用方法与功能都一样。
这里需要注意的是多出来的几个属性。
animation-iteration-count表示动画循环的次数。可以用infinite来表示无限循环动画。
animation-direction定义为动画播放的方向，默认值为normal代表每次动画都向前播放。alternate表示偶数次动画向前播放，奇数次向后播放。
结合transition属性实现一些效果：
2 animation :load 1s linear infinite;
3 }
4 @keyframe{
5 100%{
6 transform:rotate(360deg);
7 }
8 }
让需要发生动画的元素添加loading类即可
