关于css3的Transition，Transforms以及动画的一些总结

Transition

首先热一下身，请大家先看一下下面这个例子：演示

当你的鼠标放上去的时候，字体会变大，这个例子的代码如下：

Css：
#size{
text-align:center;
}
#size a{
text-decoration:none;
font-size:20px;
font-weight:bold;
-webkit-transition: font-size 0.5s linear;
-moz-transition: font-size 0.5s linear;
-o-transition: font-size 0.5s linear;
}
#size a:hover {
font-size:30px;
}
Html：
<div id="size">
<a href="#">我是css3</a></div>

这里就用到了Transition，Transition是CSS3中新添加的特性，我觉得应该叫它做叫做“转换”，即当元素在大小、颜色、布局、背景、透明度等数值改变时，可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。现在我就来讲一讲Transition的几个属性。

* transition-property

这个属性指定当元素哪个属性改变时执行Transition效果，他有一下几个值：none、all以及<元素属性名>。当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果。该属性的初始默认值为all。

* transition-duration

指定“转换”过程的持续时间，如：<时间值>（如1s、2s…）、none。
初始默认值为0.

* transition-timing-function

该属性指定“转换”过程中可用的效果，即以何种方式转换的，它有以下一个值：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

其他几个属性值的详细情况如下图：

请看下面的效果你就会更清楚这些属性值的区别了：演示

* transition-delay

指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
初始默认值为0。和css其他一些属性一样，transition也支持属性值连写。但需要值得注意的是，transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置。（原则上所有属性值是不区分位置的）一般规定浏览器会根据先后顺序决定，第一个可以解析为时间的属性值将体现为transition-duration，第二个可以解析为时间的属性值将体现为transition-delay 。

* 与js的结合使用

除了上面说到的与:hover伪类的结合使用外，transition还可以与js结合使用，如onclick、onmouseover、onmouseout等等！其用法跟:hover原理类似。

* 浏览器支持状况

目前只有Chrome 2+(-webkit-transition)，Firefox3.7+(-moz-transition)，Safari 3.1+(-webkit-transition)，Opera 10.5+(-o-transition)支持，其他浏览器暂不支持。

Transform

先来看一个例子，演示

相信学过css3的童鞋都应该看过的，里面就是用了transition和transform来实现一个动态的效果，给用户更好的视觉体验，虽然用js也可以实现，但代码可能要比js少很多。

属性：

translate：定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位，也可以单独定义：translateX(Xpx)或translateY(Ypx)。如以下代码：

-webkit-transform:translate(100px,0px);
 
-moz-transform:translate(100px,0px);
 
-o-transform:translate(100px,0px);
 
transform:translate(100px,0px);

scale：缩放，1为原始大小。scale(x,y)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。 也可以单独定义：scaleX(x)或scaleY(y)。如以下代码：

-webkit-transform: scale(1.5);
 
-moz-transform: scale(1.5);
 
-o-transform:scale(1.5);
 
transform:scale(1.5);

rotate：水平旋转，属性值格式为Xdeg。rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转。如下代码：

-webkit-transform: rotate(360deg) ;
 
-moz-transform: rotate(360deg) ;
 
-o-transform: rotate(360deg) ;
 
transform: rotate(360deg) ;

skew：将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜，也可以单独定义：skewX(Xdeg)或skewY(Ydeg)。可能你会认为这个很难理解，也很难描述，下面我用图来描述一下可能更容易理解一些。

也就是当X为正的时候，竖直方向的边向右偏移相应的度数，当Y为正的时候，水平方向的边向下偏移相应的度数。负数则向相反的方向偏移。代码如下：

-webkit-transform:skew(20deg,5deg);
 
-moz-transform:skew(20deg,5deg);
 
-o-transform:skew(20deg,5deg);
 
transform:skew(20deg,5deg);

matrix：矩阵，六个值。即matrix(<number>, <number>, <number>, <number>, <number>, <number>) ：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。这个属性还是很难理解，那还是用图说明吧：

讲完了上面的属性，再来看一些简单的例子，相信你可以更好的理解这个标签：演示

还有一个标签，他与transform密切相关，这个标签就是transform-origin。在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。（默认是围绕图形的中心）这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。举个例子：

-webkit-transform-origin:top center;

动画(animation)

Css3的动画更然我看到了js的影子，废话少说，先来看一个动画过过瘾：演示

其实css代码很简单：

.move {
 
-webkit-animation-name: bounce;
 
-webkit-animation-duration: 1s;
 
-webkit-animation-iteration-count: 10;
 
-webkit-animation-direction: alternate;
 
position: relative;
 
left: 0;
 
top:100px;
 
width:300px;
 
height:60px;
 
text-align:center;
 
line-height:100px;
 
background:#39F;

}
 
@-webkit-keyframes bounce {
 
from {
 
left:0px;
 
-webkit-animation-timing-function: ease;
 
}
 
to {
 
left:300px;
 
}
 
}

-webkit-animation-name用来定义一个名字

-webkit-animation-duration用来定义动作发生一次的时间

-webkit-animation-iteration-count:用来定义动作重复的次数，infinite即为无限次，默认是1

-webkit-animation-timing-function:用来定义动作的播放方式，参数类似于transition-timing-function

-webkit-animation-delay:用来定义动作开始的时间

-webkit-animation-direction:用来定义动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

指定动画是很容易的，首先你要在描述动画效果中使用-webkit-keyframes规则

-webkit-keyframes块称为关键帧包含规则集，用来描述物体的运动规则。并用一个名字（文中是bounce）将其与要动作的代码块联系起来（如上的.move），就可以对物体就行动作操作。再看一个例子：演示

@-webkit-keyframes pulse {
 
0% {
 
background-color: red;
 
opacity: 1.0;
 
-webkit-transform: scale(1.0) rotate(0deg);
 
}
 
33% {
 
background-color: blue;
 
opacity: 0.75;
 
-webkit-transform: scale(1.1) rotate(-5deg);
 
}
 
67% {
 
background-color: green;
 
opacity: 0.5;
 
-webkit-transform: scale(1.1) rotate(5deg);
 
}
 
100% {
 
background-color: red;
 
opacity: 1.0;
 
-webkit-transform: scale(1.0) rotate(0deg);
 
}
 
}
 
.pulsedbox {
 
-webkit-animation-name: pulse;
 
-webkit-animation-duration: 4s;
 
-webkit-animation-direction: alternate;
 
-webkit-animation-timing-function: ease-in-out;
 
}

此例子-webkit-keyframes规则里面有百分数将动作过程分成多个步骤。

这些例子只是简单的动画，用这个方法加上你的创造力是可以做出很神奇很神奇的动画的，这个以后还要多多努力。还是新手，欢迎指出错误。

参考资料：

*CSS3 Transition详解
*Coordinate Systems, Transformations andUnits
*CSS3–transform 变形金刚
*Surfin’ Safari