css過渡效果
transition設置過渡，transition的屬性包括如下圖：
| 屬性 | 描述 |
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 |
設置格式
爲了不同瀏覽器的效果，需要爲其它幾種添加相應的前綴標識：
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
如下：
width屬性會改變， 用時1秒，速度樣式勻速，延時1秒。
transition-property:width;
transition-duration:1s;
transition-timing-function:linear; //過渡效果
transition-delay：1s; //過渡延時
簡寫格式：transition:width 1s linear 1s;
也可以多屬性樣式改變，如下：
width,height,transform屬性會改變，對應的樣式用時1秒中，過渡效果爲linear(勻速)，延時1秒
transition-property:width, height,transform;
transition-duration:1s,1s,1s,;
transition-timing-function:linear; //過渡效果
transition-delay：1s; //過渡延時
簡寫格式：transition:width 1s,height 1s,transform 1s;
以上之後，確定屬性改變的時候，可以是在鼠標放在元素上之後：
元素：hover{
width: 150px;
height: 150px;
transform:rotate(360deg);
}需要爲其它幾種添加相應的前綴標識：
這樣就ok 了。！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css的過渡</title>
<style>
#test{
width: 1000px;
margin: auto;
text-align: center;
}
.demo{
width: 100px;
height: 100px;
margin-top: 100px;
text-align: center;
line-height: 100px;
display: inline-block;
background: red;
transition-property: width,height,transform;
transition-duration: 1s;
transition-timing-function: linear;
/* Firefox 4 */
-moz-transition-property:width,height,transform;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
/* Safari 和 Chrome */
-webkit-transition-property:width,height,transform;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear,transform;
/* Opera */
-o-transition-property:width,height,transform;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
}
.demo:hover{
width: 150px;
height: 150px;
line-height: 150px;
background-color: red;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
</head>
<body>
<div id="test">
<div class="demo" style="background-color: yellowgreen">hello word!</div>
<div class="demo" style="background-color: greenyellow">PHP語法</div>
<div class="demo" style="background-color: dodgerblue">object</div>
<div class="demo" style="background-color: chartreuse">c++</div>
<div class="demo" style="background-color: palevioletred">java</div>
</div>
</body>
</html>