html中transtion属性,CSS3中Transition动画属性用法详解

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

transition属性的值包括以下四个：

•transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。

•transition-duration：指定属性过渡的持续时间

•transition-timing-function：指定渐变的速度：

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]区域内，否则无效。

•transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。

浏览器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 属性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。

下面还是以实例来说明transition的用法

XML/HTML Code复制内容到剪贴板

html>

transition演示1

.animated_div {

margin: 100px auto;

width:100px;

height:60px;

background:#92B901;

/*简写属性*/

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */

/*每个属性分开写*/

transition-property:width,height,transform,background,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;

border-radius:5px;

opacity:0.4;

}

.animated_div:hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

opacity:1;

background:#1ec7e6;

width:200px;

height:120px;

}