css3之过渡(transition)转换（transform）

css3之过渡(transition)与转换（transform）

过渡与转换是css3的颠覆特效，常用来被制作特效
Transition: property duration timing-function delay
Property:要进行过渡动画的属性，可任意通过transition-property来单独设置，如果是all表示所欲的动画都要进行动画过渡
Duration:动画间隔时间，transition-duration属性以秒或者毫秒为单位指定过渡动画所需时间，默认值为0s,表示不出现动画过渡
Timing-function,加速曲线，transition-timing-function属性用来描述这个中间值是怎样计算的，通过这个函数会建立一条加速曲线，在整个transition变化过程中，变化速度可以不进行变化
Ease-in-out 先慢后快
Timing-function:加速曲线：step-star(一步到结束效果) step-end(第一步到结束结果)
Steps(4,end)要4步才能到结束结果

平面2d转换为transform
转换是css3中具有颠覆性的特性之一，可以实现元素的位移，旋转，变形，缩放，甚至支持矩阵方式，取代之前只能用falsh才能实现的效果
1.转换原点
(1)Transition-origin 设置转换图形的原点，可以设置两个值，类型是：百分比，像素，位置名（left,top,bottom,right）
(2)移动translate(x,y)可以改变元素的位置，x,y可以为负值，带像素坐标
(3)缩放scale（x,y）可以对元素进行水平与垂直方向的缩放，x,y的取值可以为小数，不可为负值，不带参数
(4)旋转rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；值可选，30deg或者0.5turn
(5)倾斜skew(deg,deg)可以使元素进行一定角度的倾斜,单位deg
(6)如果有多个转换操作，用css隔开

举例子如下：
1. .box {
transition-property: width;
transition-duration: 10s;
transition-timing-function: steps(10, end);
width: 200px;
height: 200px;
border: 1px solid #ccc;
background-color: #aaa;
}
.box:hover {
width: 300px;
}

上面是盒子原本的样子，在鼠标滑上之后发生变化，在10s内，宽度走10步，由200px变为300px，如下：

2.
.box1 {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background-color: #aaa;
transition: all 5s ease-in-out 0s;
}

.box1:hover {
width: 300px;
height: 10px;
opacity: 0.5;
background-color: aqua;
}
盒子原本样子：
滑上去之后的样子：