css3的transition

CSS3 transform是什么？
transform的含义是：改变，使…变形；转换

CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”。

.demo_transform1{
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
}

transform:skew()：
含义：倾斜；其中“deg”是“度”的意思，如“20deg”表示“10度”。

.demo_transform2{
transform:skew(20deg);
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
}

transform:scale(x,y)：
含义：比例；可传2个值，当写一个时，表示xy都一样，“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform2{
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
}

transform:translate(x,y)：
含义：变动，位移；可以传3个值，x、y。

也可以写成 translateX( ), translateY( ).

如表示向右位移100像素，即第一个值为100px，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform2{
transform:translate(100px,0);
-webkit-transform:translate(100px,0);
-moz-transform:translate(100px,0);
}
或者

.demo_transform2{
transform:translateX(100px);
-webkit-transform:translateX(100px);
-moz-transform:translateX(100px);
}

CSS3 transition 过度效果
当鼠标经过时，宽度边为300px,时长为 2 秒：

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 /
-webkit-transition: width 2s; / Safari 和 Chrome */
}
div:hover {
width:300px;
}
transition有4个属性:

1、transition-property：规定应用过渡的 CSS 属性的名称。with可获得宽度属性，height可获得高度属性，transform可获得动画属性，all 可以获取所有属性，所以推荐写all

2、transition-duration：定义过渡效果花费的时间。默认是 0。

3、transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。有5个属性，分别为：

linear–匀速 规定以相同速度开始至结束的过渡效果
ease–慢-快-慢 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in–慢-快 规定以慢速开始的过渡效果
ease-out–快-慢 规定以慢速结束的过渡效果
ease-in-out–慢-快-慢 规定以慢速开始和结束的过渡效果
4、transition-delay：规定过渡效果何时开始。默认是 0。

4个属性可以合起来写

div{
transition: all 1s linear .5s;
/4个属性分别表示：所有属性都有动作效果、动作时间为1S、速度为匀速、延迟0.5S开始动画/
}