CSS3--transition

它可以用来做什么？

CSS transitions可以让一个css属性值在一个给定的时间内平滑的改变，而不再是和以前一样，当我们设置一个css属性值时，它会立即表现出来结果，如color: red, 当我们设置完这个属性，如果是应用在span上，那么span内的文字立即会变成红色。而我们如果用到transition,那么这个值就会在一定时间内，假设以前是黑色，就会由黑色逐渐变成红色，而不再是立即变成红色。

谁支持它？

 

如何用它？

transition: <property> <duration> <animation type> <delay>

webkit:-webkit-transition; mozilla: -moz-transition; opera: -o-transition; IE 10 beta: -ms-transition;

#id_of_element {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

<property>:是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改 变)；all（所有属性改变）这个也是其默认值；还有就是css属性。当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，CSS属性是可以指定元素的某一个属性值。

<duration>:是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是和不用transition的效果是一样的，即时发生效果。

<animation type>:取值可以从下列取值中选取，其实就是贝塞尔曲线的变化，觉得很难，这里有个工具网站可以帮你完成这些取值

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

 

下面让我们看一组实际效果关于选择不同的animation type：

Ease

Ease
In

Ease
Out

Ease
In Out

Linear

Custom

Awesome!

Hover on me

MouseOver上去对于每个test-box执行了如下操作：

background-color: #FFFFFF;
border-radius: 30px 30px 30px 30px;
margin-left: 420px;
transform: rotate(720deg);

<delay>: 是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取 值：<time>为数值，单位为s（秒），其使用和transition-duration极其相似，也可以作用于所有元素，包 括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。

让我们来看一组关于delay的例子:

 

 

 

 

 

 

 

 

 

Hover on me

 参考文章：

http://css3.bradshawenterprises.com/transitions/

http://www.w3cplus.com/content/css3-transition