1. CSS3

CSS3是CSS的最新版本。
width height background border 都属于 CSS2.1
CSS3 会保留之前 CSS2.1的内容，只是添加了一些新的语法。

CSS3 : border-radius :nth-of-type() background-size

2. transition过渡

transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;

transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms

transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡

transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速…
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
（ http://cubic-bezier.com ）

复合写法：
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。

transition:2s 3s linear all; √

注意：不要把transition放到hover中

3. transform变形

translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )

scale : 缩放
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )

rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad

rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。

四. 想做特效

**要确定：**起点值和结束值。
**套路：**1.先把静态的效果做出来。
2. 把要运动的终点位置先做出。
3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ).
4. 写 tranform变形的起点值 (起点的位置)

五. animation动画

原理：逐帧动画。会把整个运动过程，划分成100份。

animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式
    ease linear


@keyframes 动画的名字 {
    from {}   
    to {}
}

from : 起点位置 , 等价于 0%  to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。

复合样式：
    animation

animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
 	none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
	backwards  :  在延迟的情况下，让0%在延迟前生效
 	forwards  :  在运动结束的之后，停到结束位置
 	both  :  backwards和forwards同时生效

animation-direction  :  属性定义是否应该轮流反向播放动画。
 	alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
 	reverse : 永远都是反向 , 从100%~0%
 	normal (默认值) : 永远都是正向 , 从0%~100%

六. animate.css

一款强大的预设css3动画库。
  	官网地址：https://daneden.github.io/animate.css/
 		
基本使用：
    animated : 基类(基础的样式，每个动画效果都需要加)
    infinite : 动画的无限次数
    如果想改变运动的时间：需要在css文件中改变animated这个样式里的时间。

七. 3D效果

perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。
    3D的眼镜

    rotateX
    rotateY
    translateZ
    scaleZ

    注：反馈回来的立体，仅限于平面。