CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
它是如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | 谷歌 | IE | 火狐 | 苹果 | opera |
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
实例
应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：
规定当鼠标指针悬浮(:hover)于 <div>元素上时：
HTML
x
31
31
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程网(web176.com)</title> 6
<style> 7
div8
{9
width:100px;10
height:100px;11
background:red;12
transition:width 2s;13
transition:width 2s; /* Safari */14
}15
16
div:hover17
{18
width:300px;19
}20
</style>21
</head>22
<body>23
24
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>25
26
<div></div>27
28
<p>鼠标移动到 div 元素上，查看过渡效果。</p>29
30
</body>31
</html>注意： 当鼠标光标移动到该元素时，它逐渐改变它原有样式
多项改变
要添加多个样式的变换效果，添加的属性由逗号分隔。
添加了宽度，高度和转换效果：
HTML
xxxxxxxxxx1
28
28
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程网(web176.com)</title> 6
<style> 7
div {8
width: 100px;9
height: 100px;10
background: red;11
transition: width 2s, height 2s, transform 2s; /* For Safari 3.1 to 6.0 */12
transition: width 2s, height 2s, transform 2s;13
}14
15
div:hover {16
width: 200px;17
height: 200px;18
transform: rotate(180deg); /* Chrome, Safari, Opera */19
transform: rotate(180deg);20
}21
</style>22
</head>23
<body>24
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>25
26
<div>鼠标移动到 div 元素上，查看过渡效果。</div>27
</body>28
</html>过渡属性
下表列出了所有的过渡属性:
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
下面的两个例子设置所有过渡属性。
在一个例子中使用所有过渡属性：
HTML
xxxxxxxxxx1
41
41
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程网(web176.com)</title> 6
<style> 7
div8
{9
width:100px;10
height:100px;11
background:red;12
transition-property:width;13
transition-duration:1s;14
transition-timing-function:linear;15
transition-delay:2s;16
/* Safari */17
transition-property:width;18
transition-duration:1s;19
transition-timing-function:linear;20
transition-delay:2s;21
}22
23
div:hover24
{25
width:200px;26
}27
</style>28
</head>29
<body>30
31
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>32
33
34
35
<div></div>36
37
<p>鼠标移动到 div 元素上，查看过渡效果。</p>38
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>39
40
</body>41
</html>与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：
HTML
xxxxxxxxxx1
33
33
1
2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Web176教程网(web176.com)</title> 6
<style> 7
div8
{9
width:100px;10
height:100px;11
background:red;12
transition:width 1s linear 2s;13
/* Safari */14
transition:width 1s linear 2s;15
}16
17
div:hover18
{19
width:200px;20
}21
</style>22
</head>23
<body>24
25
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>26
27
<div></div>28
29
<p>鼠标移动到 div 元素上，查看过渡效果。</p>30
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>31
32
</body>33
</html>阅读剩余 86%
作者：terry，如若转载，请注明出处：https://www.web176.com/css3/5081.html
支付宝 
微信 