css过渡、动画及转换

过渡
如果你想让一个div从红色变成蓝色，但又不想那么生硬的直接变过去，这时候就可以使用过渡了。
过渡效果可以应用于各种css属性,包括:背景颜色,宽度,高度,不透明度等等.
（1）transition-property:指定要转换的属性
（2）transition-duration:指定转换发生的持续时间
（3）transition-timing-function:指定转换的速度在其持续时间内如何变化
（4）transition-delay:指定过渡效果的延迟(以秒为单位)
举例:
div元素的宽度和高度都是100px,并有一个红色的背景.我们为width属性指定一个过渡效果,持续时间为3s.
代码:div.transition{ width:100px;
height:100px;background:red;color:white;transition:width 3s; }div.transition:hover{ width:250px;}
效果如下:
如果你将光标悬停在div元素上,则会从左向右移动.当光标被移出div元素时,它将逐渐变回原来的样式.
transition-timing-function属性指定过渡效果的速度曲线.它可以有以下值:
（1）ease:动画开始缓慢,然后加速(默认值)
（2）ease-in:缓慢开始,然后加速,突然停止.
（3）ease-out:快速启动,但减速停止.
（4）ease-in-out:类似于缓解,但更加微妙的加速和减速.
（5）linear:匀速转换

转换
转换（transform）是CSS3新增的属性，转换属性可以对元素进行移动、缩放、转动、拉长或拉伸。
CSS3的转换属性包括2d和3d转换。
语法:
transform(x)：改变元素在x轴的位置，取值为正向右移，取值为负向上移
transform(x,y)：改变元素在x轴和y轴上的位置，y：取值为正向下移，取值为负向上移stranslateX(x)：改变元素在x轴上的位置stranslateY(y)：改变元素在y轴上的大小

2D转换
2d转换包括5个常用的转换方法
（1）translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
（2）rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
（3）scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
（4）skew()：参数表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
（5）matrix()：2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3D转换
3D 位移：translate3d(x, y, z)
3D 旋转：rotate3d(x, y, z)
透视：perspctive
3D呈现 transfrom-style

3D移动translate
3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

动画
语法:
（1）animation-delay: 多少秒之后开始执行动画， 默认是0；
（2）animation-timing-function: 控制动画的速度， 默认是 ease；
（3）animation-iteration-count: 动画播放的次数 ，默认播放次数为1次；【值：可以是具体数字，也可以是关键词，例如： infinite】
（4）animation-direction：是否需要做往返动画， 默认为normal；【值：normal, alternate】
（5）animation-play-state: 当前动画是否需要暂停， 默认为running； 【值：running, paused】
（6）animation-fill-mode: 用于指定动画开始之前的状态和结束状态的样式；【值：none, forwards (结束状态保持动画最后一帧的样式)， backwards(等待状态时显示动画第一帧), both】