（一） - css动画

此刻心情：一脸懵逼，万般无赖。

css动画设计的css 属性：animation（动画）、transition（过渡）、transform（变形）；

transform属性：translate(平移)、scale(缩放)、skew(倾斜）、rotate(旋转)；

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

transition属性：

transition: property duration timing-function(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n))
 delay;

animation属性：

animation: name duration timing-function delay iteration-count direction;

值	描述
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 之间的数值。

demo感受链接：http://www.w3school.com.cn/tiy/c.asp?f=css_animation-timing-function&p=2

看了那么多，还是不会写动画效果。

1.全屏滚动

2.页面元素渐显

3.页面左右上下划入页面

4.在当前位置周围晃动

5.无线旋转

6.扭曲元素（例如：切换页面）

7.一些特殊效果动画，比如文字渐显，线条渐显

动画与贝塞尔曲线：http://blog.csdn.net/xiaoyounihao/article/details/78531015

有一个简历涉及了这个动画，可以看看网页源码研究研究：http://fenav.com/jianli/