CSS3中的过渡
-
CSS3中新增了一个过渡属性,它使得我们可以在不使用flash动画或者Javascript的情况下,当元素从一种样式变换为另一种样式时为元素添加过渡效果。这种过渡是从一个状态渐渐的过渡到另外一个状态。
-
过渡最简单的使用是和hover一起搭配使用。
-
它的语法为:
transition: 要过渡的属性 花费的时间 运动曲线 开始时间;
-
参数说明:
参数 | 解释 |
---|---|
要过渡的属性(必须写) | 要变化的属性,比如宽度,高度,颜色,内外边距等都可以。如果想要所有的属性都变化,那么可以用all来代替。 |
花费的时间(必须写) | 完成这个过渡变化的效果用多长时间。单位是秒,注意:一定要写上单位例如0.5s或者.5s |
运动曲线(可以省略) | 默认值是ease(变化速度逐渐慢下来),跟多值参考下一个表格。 |
开始时间(可以省略) | 默认为0s(必须写单位),可以设置延迟触发时间 |
- 运动曲线取值表格
运动曲线可取值 | 含义 |
---|---|
linear | 匀速 |
ease | 逐渐慢下来 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速后减速 |
-
例如:
/* CSS */ .a { width: 150px; height: 10px; border: 1px solid red; border-radius: 5px; } .b { width: 50%; height: 100%; border-radius: 5px; background-color: red; transition: width .5s; } .a:hover .b { width: 100%; } <!-- HTML --> <div class="a"> <div class="b"></div> </div>
- 上述代码产生的效果为:当鼠标移动到a盒子上时,进度条会用0.5秒的时间渐渐过渡到100%