付费节点推荐
免费节点
节点使用教程
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...
| 默认值： | all 0 ease 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property (值： all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变) ） | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration （值：1s，单位为秒） | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function （值：
ease(逐渐变慢) | linear(匀速) | ease-in(加速) | ease-out(减速) | ease-in-out(先加速然后减速) | cubic-bezier(该值允许你去自定义一个时间曲线)(number, number, number, number>)）
|
规定速度效果的速度曲线。 |
| transition-delay （值：0.5s，单位为秒） | 定义过渡效果何时开始。 |
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
实例
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
未经允许不得转载：Bcoder资源网 » CSS3 transition 属性
评论前必须登录！
登陆 注册