css3的transition属性详解

来源：互联网发布：网络印刷市场定位编辑：程序博客网时间：2024/05/18 00:21

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

transition主要包含四个属性值：
执行变换的属性：transition-property,
变换延续的时间：transition-duration,
在延续时间段，变换的速率变化transition-timing-function,
变换延迟时间transition-delay。

下面分别来看这四个属性值

一、transition-property:
property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。

二、transition-duration:

transition-duration是用来指定元素转换过程的持续时间，取值：<time>为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值0，也就是变换时是即时的。

三、transition-timing-function:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

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:

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒）或者ms(毫秒)，

其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是"0"，也就是变换立即执行，没有延迟。

示例：

p {transition-property: background-color,color;transition-duration: 0.5s;transition-timing-function: ease-in-out 2s;-webkit-transition-property: background-color,color;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease-in-out 2s;-moz-transition-property: background-color,color;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease-in-out 2s;}

简写：

p {  -webkit-transition: all .5s ease-in-out 1s;  -o-transition: all .5s ease-in-out 1s;  -moz-transition: all .5s ease-in-out 1s;  transition: all .5s ease-in-out 1s;}

下面是具体的例子，可以拷贝查看效果：

<!DOCTYPE html><html><head><title>CSS3</title><style type="text/css"> .hi{background:#ccc;    color:#FFF;padding:10px 0;width:300px;text-align:center;display:block;} .hi:hover{background:#000;color:#f60;-moz-transition: background-color 0.5s ease-in,color 0.3s ease-out;-webkit-transition: background-color 0.5s ease-in,color 0.3s ease-out ;-o-transition: background-color 0.5s ease-in,color 0.3s ease-out;transition: background-color 0.5s ease-in,color 0.3s ease-out;  }  .trans {display: inline-block;padding: 1px 8px;text-decoration:none;background:#ccc;color:#fff;transition-property: background-color,color;transition-duration: 0.5s;transition-timing-function: ease-in-out 2s;-webkit-transition-property: background-color,color;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease-in-out 2s;-moz-transition-property: background-color,color;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease-in-out 2s; } .trans:hover {background-color: #ddd;color:#f60;} h1 { display:block; width:160px;  line-height:30px; text-align:center; padding:10px; background:#33589f; color:#fff; text-decoration:none;}  h1:hover { background:#000; color:#f60;text-shadow:2px 2px 10px #f00;box-shadow:2px 2px 10px #000;opacity:0.8;width:260px;-moz-transition:background 0.5s ease-in, color 0.4s ease-out, text-shadow 0.5s linear, box-shadow 0.6s linear , opacity 0.6s linear,width 2s linear;//多个属性的动画，可放HOVER也可以放在初始的地方 } </style></head><body><h2 class="hi">你好CSS3 transition</h2><a href="#" class="trans">经过我，看看CSS3 transition的效果哦</a><h1>你好CSS3 transition 多个属性一起看</h1></body></html>