IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

 

CSS3的transition容许css的属性值在必定的时间区间内平滑地过渡。这种效果能够在鼠标单击、得到焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition属性是一个简写属性，用于设置四个过渡属性，这四个过渡属性的描述如表1-21：

表1-21  transition过渡属性及描述

 

   

transition最简单的用法

下面，咱们为一个div设置初始宽度为200px，背景颜色为“red”色并增长“transition: 2s”。当鼠标移入到这个div后，div通过2s后宽度增长到400px，背景颜色变成“pink”色。2s的过渡时间，咱们能够见证div的总体变化，代码以下：

 

将这段代码运行到浏览器中，咱们能够一览div的过渡效果。图7-62是笔者为div过渡初期、中期和后期随机截取的三张图，以供读者参考：

 

另外，transition还能够指定须要过渡的属性，如咱们只须要过渡上例div的宽度属性时，只须要将transition属性的值设为“2s width”。这是，当咱们将鼠标移入到这个元素时，div背景颜色立马变为了“pink”色，而宽度变化是有过渡的。

咱们还能够设置transition的运动样式、延迟时间及运动形式，读者感兴趣能够一一尝试设置运行。