transition参数css,不一样的css3之Transition

transition属性允许css的属性值在指定的时间内进行过度，也就是执行动画效果。它是以hover,focus，active等伪类作为动画触发的条件。也就是动画效果必须基础悬停，点击等事件才能触发。

### 参数

#### transition-property：指定过渡或动态模拟的css属性，也就是指定究竟是哪个属性要执行动画效果。

1.none

没有属性会获得过渡效果。

2.all

所有属性都将获得过渡效果。

3.property

定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

#### transition-duration：指定完成过渡所需的时间。单位是秒或毫秒

#### transition-timing-function：指定过渡函数

1.ease：逐渐变慢(默认值)

2.linear：匀速

3.ease-in：加速

4.ease-out：减速

5.ease-in-out：先加速后减速


#### transition-delay：开始执行动画的延迟时间，单位是秒或毫秒

说完了transition的属性，下面就该说如何使用transition来完成动画 效果。这里就需要用到伪类来作为动画的触发条件了。

伪类中指定了动画的最终样式。

~~~

div:hover{

border-radius:0;//为了方便这里没有写css hack

}

~~~

上述代码指定了动画效果完成之后圆角为0。

~~~

div{

width:100px;

height:100px;

border-radius:50px;//设置动画的初始样式

transition-property:border-radius;//指定需要执行动画的属性

transition-duration:2s;//整个动画完成需要2s

transition-timing-function：linear//匀速

transition-delay:.2s//延迟0.2s

}

~~~

当鼠标移动到div上时，在经过0.2秒的延迟之后div匀速从正方形变成圆形，整个动画(不包括延迟)花费2秒。

如果property参数为all，那么所有与伪类相同的属性都将会执行动画效果。

也可以将transition所有属性都写在一起

~~~

div{

width:100px;

height:100px;

border-radius:50px;

transition:border-radius 2s linear .2s;

}

~~~

transition自然避免不了要写兼容各浏览器的hack，所以为了减少工作量还是尽量把属性都写在一起。