Css中的变形及过渡动画
在css3的标准中新增加了变形样式，这些样式使得网页中各元素的位置形状的变换变得更加容易。其语法如下：
transform：none | <transform-function>+
其中对于<transform-function>这一属性值，css中规定了4类常用变换
1.translate()
该值指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 。
例：
.exp{
width:150px;
height:150px;
background:red;
}
.exp:hover{
transform:translate(100px,100px);
}
当鼠标移动到元素上时，元素的位置发生了改变（向左平移了100px，向下平移了100px）。
当然也可以指制定某一个方向上的平移，如translateX（），translateY（），这时，括号里的值只有一个，表示平移的长度。
2.rotate（）
该值指定了对象的2d旋转，括号里面为旋转度数，单位为deg。特别注意，在使用该属性值时要先设置元素的中心点，即transform-origin，这个样式的值可以为表示长度的单位，也可以是百分比。
例：
.exp{
width:150px;
height:150px;
background:red;
}
.exp:hover{
transform-origin:0 50%;
transform:rotate(45deg);
}
在2d旋转中默认旋转方向为顺时针方向，旋转中心为transform-origin所设置的位置。同时，我们也可以定义其旋转方式为沿着旋转轴方向旋转，例如rotateX（），rotateY（）。
3.Scale（）
该属性表示的是元素的缩放，在2d变形中括号里的值有两个，分别表示x轴和y轴方向的缩放，其值为一数字，表示的是与原来尺寸的比例系数。
例：
.exp{
width:150px;
height:150px;
background:red;
}
.exp:active{
transform-origin:0 50%;
transform:scale(2,1.5);
}
与上面的属性值类似，我们可以设置单一方向上的缩放，scaleX（），scaleY()。
4.Skew（）
该属性值表示的是元素的倾斜，该值得两个参数分别表示X轴与Y轴上的倾斜，其值都以角度（deg）表示。
例：
.exp{
width:150px;
height:150px;
background:red;
transform:skew(25deg,0);
}
在倾斜中，最后所得的元素的位置与transform-origin有关。
上述的四个属性不仅适用于2d场景，同时也适用于3d场景中，此时只需要将其改写为translate3d（），rotate3d()，skew3d()，scale3d()。此时，坐标系中有XYZ三个坐标轴，其中X轴为水平方向，正方向为右，Y轴为垂直方向，正方向向下，Z轴为垂直屏幕的方向，垂直屏幕向外（即指向屏幕前的自己）为正方向。
了解了css中的变形之后，我们可以由此设计过渡动画。这里的过渡动画是指通过css使得元素的某些属性发生改变时，所产生的动画效果。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
- transition-property(过渡属性)：
表示在动画中所要产生动画效果的属性，这里的过渡属性可以设置任意的属性为值，我们也可以直接将它的值设置为all，表示每个产生变化的属性都产生动画效果。
- transition-duration(过渡所需时间)：
该属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。单位为s。
例
.exp{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
}
.exp:hover{
width:300px;
}
当鼠标移动到盒子上时，盒子缓慢得拉长。
3. transition-timing-function(动画--过渡函数) :
该属性表示的是当动画发生时，动画的表现效果。其值有：
ease:默认值，逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,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.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)
4.transition-delay(动画--过渡延迟时间)：
transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
例：
.exp{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
transition-delay:1s;
}
.exp:hover{
width:300px;
}
当鼠标移到盒子上时，盒子的宽度变为了300px，之后过了一秒钟，产生动画效果。
将以上多个属性连在一起，则可写为：
transition：[ none | <transition-property> ] || < transition-duration > || <transition-timing-function> || < transition-delay> [,*]
例：
.exp{
width:150px;
height:150px;
background:red;
transition:width 1s ease 1s;
}
.exp:hover{
width:300px;
}
