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中创建简单的过渡效果可以从以下几个步骤来实现：

第一，在默认样式中声明元素的初始状态样式；

第二，声明过渡元素最终状态样式，比如悬浮状态；

第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

1. transition-property(过渡属性)：

表示在动画中所要产生动画效果的属性，这里的过渡属性可以设置任意的属性为值，我们也可以直接将它的值设置为all，表示每个产生变化的属性都产生动画效果。

1. 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;
}