CSS3 transition 属性

w3school 在线教程

## CSS 参考手册

- CSS 参考手册
- CSS 选择器
- CSS 听觉参考手册
- CSS 网络安全字体
- CSS 单位
- CSS 颜色
- CSS 颜色值
- CSS 颜色名
- CSS 颜色十六进制

# CSS3 transition 属性

CSS 参考手册

## 实例

把鼠标指针放到 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 */
    }

亲自试一试

## 浏览器支持

IE | Firefox | Chrome | Safari | Opera
--- | --- | --- | --- | ---

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

## 定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

- transition-property
- transition-duration
- transition-timing-function
- transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值： | all 0 ease 0
继承性： | no
版本： | CSS3
JavaScript 语法： | object.style.transition="width 2s"

## 语法

    transition: property duration timing-function delay;

值 | 描述
--- | ---
transition-property | 规定设置过渡效果的 CSS 属性的名称。
transition-duration | 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function | 规定速度效果的速度曲线。
transition-delay | 定义过渡效果何时开始。

CSS 参考手册