CSS3 的transition和transform属性
CSS3 transition 属性
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
兼容问题：
-webkit-transition: .2s;/* Safari and Chrome */
-moz-transition: .2s;/* Firefox 4 */
-ms-transition: .2s;/* IE 9 */
-o-transition: .2s; /* Opera */
transition: .2s;
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
语法
transition: property duration timing-function delay;
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
语法
transition-property: none|all|property;
| 值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果。 |
| all | 所有属性都将获得过渡效果。 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
transition-duration: time;
| 值 | 描述 |
|---|---|
| time |
规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。 |
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,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)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
transition-delay: time;
| 值 | 描述 |
|---|---|
| time | 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。 |
CSS3 transform属性
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew()：
含义：倾斜；
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()：
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate()：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
