CSS3 过渡
CSS3 过渡
通过 CSS3在不使用 Flash 动画或 JavaScript
元素上：
CSS3 过渡
| 属性 | |||||
|---|---|---|---|---|---|
| transition | |||||
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 持 transition 属性。
注释：Chrome 25 前缀 -webkit-。
？
CSS3 果。
：
- 到哪个 CSS 属性上
- 时长
实例
为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注释：认值是 0。
指定的 CSS 时。CSS ：
实例
<div>
div:hover
{
width:300px;
}
注释：。
多项改变
隔开：
实例
：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
过渡属性
：
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 性。 | 3 |
| transition-property | 渡的 CSS 。 | 3 |
| transition-duration | 0。 | 3 |
| transition-timing-function | "ease"。 | 3 |
| transition-delay | 。默认是 0。 | 3 |
：
实例
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
实例
写的 transition 属性：
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}