CSS2及CSS3动画

CSS3 Gradient渐变

（1）线性渐变(linear)
background: linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
第一个属性值表方向，默认为180deg，等同于to bottom
第二第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
（2）径向渐变(radial)
background: radial-gradient(center, shape size, start-color, …, last-color);
注：IE浏览器
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型 （0 代表竖向渐变 1 代表横向渐变）

CSS3 2D转换

使用transform属性，可进行动画变换，transform有四个函数
（1）rotate（30deg） 旋转函数，元素顺时针旋转30度，可为负值
通过设置transform-origin可改变旋转基点
（2）skew（30deg,20deg） 倾斜函数，围绕X轴翻转30度，围绕Y轴翻转20deg
（3）scale（2,4） 缩放函数，根据X轴转换为原来的2倍，根据Y轴转换为原来的4倍
（4）translate（50px,100px） 位移函数，水平方向沿X轴正方向移动50px，垂直方向沿Y轴正方向移动100px。
以上四个函数均可指定单个方向进行设置，如rotateX(),rotateY()

动画过渡

使用transition属性，可实现动画转换时的过渡效果。
transition是一个复合属性，由以下属性简写而成。
（1）transition-property 要运动的样式（all || [attr] || none）
（2）transition-duration 运动时间
（3）transition-delay 延时时间，即限定时间之后才会执行动画
（4）transition-timing-function 运动形式
  ease（逐渐变慢）/linear（匀速）/ease-in（加速）/ease-out（减速）/ease-in-out（先加速后减速）
http://cubic-bezier.com/#.31,.66,.67,.3
此网址可制定自己想要的运动形式。

transition:all 1s;即为设置所有的运动形式1s之内过渡，没有延时，默认速度逐渐变慢。

补充

（1）pointer-events：none；可设置阻止用户的点击动作产生的任何效果，阻止缺省鼠标的显示，阻止CSS里hover和active状态的变化触发事件，阻止JavaScript点击动作的触发事件。
（2）backface-visibility：hidden；设置元素不面向屏幕时不可见，如把元素沿Y轴旋转180度之后，默认是可以看到元素的背面的，如果设置backface-visibility为hidden，则元素沿Y轴旋转180度之后，屏幕上就看不见该元素。

CSS3 3D转换

3D转换与2D转换类似，与2D相比，多了一条垂直于屏幕的z轴。
3D转换语法
transform：rotate3d（x，y，z，angle）旋转函数，xyz分别表示对应的轴，为1时旋转angle角度，为0时该方向不旋转。
transform：translate3d（x，y，z）位移函数，xyz分别表示沿对应轴线移动的值，正值为正方向移动，负值为负方向移动。
与2D类似，3D也可指定单个方向进行设置，如rotateX(),rotateY(),rotateZ()

窗口视图设置

perspective：800px；元素距离视图的距离；
perspective-origin：50% 50%；表示浏览器从正中心观察；
transform-style：preserve-3d；表示元素在3d空间中呈现。

动画

通过设置动画，可以让规定的动画循环播放。
运用动画之前，首先
@keyframes animationname{
  keyframes-selector{css-styles;}
}
如
@keyframes mymove{
  0%{top:0px;}
  25%{top:200px;}
  50%{top:100px;}
  75%{top:200px;}
  100%{top:0px;}
}
运用动画
animation：name duration timing-function delay iteration-count；
如animation：mymove 1s ease 0.1s 5；
即mymove动画每次执行时间为1s，速度变慢，延时0.1s，循环5次。
（infinite即为无限循环）
animation-direction：normal | alternate；属性设置是否反向播放动画
anmation-play-state：paused | running；动画正在运行还是暂停
animation-timing-function： step-start/step-end；设置以动画帧的形式播放