1、transition代表css3中的過渡，可以使元素從一種樣式逐漸改變為另一種的效果。 2、transition: height 2s;表示需要漸變的是元素高度height,漸變時間是2s。transition還有其他參數如下圖： 3、-moz-,-webkit-,-o-這三個是廠商首碼，不同瀏 ...
1、transition代表css3中的過渡，可以使元素從一種樣式逐漸改變為另一種的效果。
2、transition: height 2s;表示需要漸變的是元素高度height,漸變時間是2s。transition還有其他參數如下圖：
3、-moz-,-webkit-,-o-這三個是廠商首碼，不同瀏覽的廠商,因為不同瀏覽器有不同的標準，所以為了相容性，需要把常用的瀏覽器對應的廠商首碼加上。所以四個屬性代表的是一個意思。
-moz- 是火狐瀏覽器廠商首碼
-webkit- 是谷歌瀏覽器廠商首碼
-o- 是opera瀏覽器廠商首碼
4、div {
width:100px;
height:30px;
background:blue;
transition:width 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
這句話的意思是：
1）設置一個div元素，寬度100px，高度30px，背景是藍色，設置過渡效果2s。
2）當瀏覽器是火狐、Safari(mac自帶瀏覽器)、谷歌(Chrome)時，觸發高度變化時產生2s的漸變效果。
3）當瀏覽器是除上一句話中的瀏覽器之外時，觸發寬度變化時產生2s的漸變效果。
5、用法：需要一個觸發漸變效果的產生的條件。比如：
div:hover {
height:100px
}
這個意思是說，當滑鼠懸停在元素div上時，會觸發div元素高度漸變2s內會變為100px;但是當滑鼠移出時，div的高度同樣會在2秒內恢復為30px。
擴展資料：
transition漸變屬性值可設置多個。如width 2s, height 2s, transform 2s;
例子：效果是當滑鼠hover到div上時，高度變為200px，寬度變為200px，同時div元素旋轉180度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;/* Firefox 4 */
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari and Chrome */
-o-transition: width 2s, height 2s, -o-transform 2s;/* Opera */
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);/* Firefox 4 */
-webkit-transform: rotate(180deg);/* Safari and Chrome */
-o-transform: rotate(180deg);/* Opera */
}
</style>
</head>
<body>
<div>請把滑鼠指針放到黃色的 div 元素上，來查看過渡效果。</div>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>
整體使用代碼如下：
效果如下：
參考資料：
轉載自：https://zhidao.baidu.com/question/571327707.html
