css3過渡transition

過渡:transitioncss

 transition:transition-property/duration/timing-function/delay的縮寫。
    transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, ... ];html

    transition-property:變換的屬性名。
      none、all、一個或多個<property>(逗號分隔)。web

    transition-duration:持續時間。單位s或ms。
      <time>默認爲0。無過渡效果。函數

    transition-timing-function:過渡效果的速度曲線。
      linear:勻速,等於cubic-bezier(0,0,1,1)
      ease:慢快慢,等於cubic-bezier(0.25,0.1,0.25,1)
      ease-in:以慢開始,等於cubic-bezier(0.25,0.1,0.25,1)
      ease-out:以慢結束,等於cubic-bezier(0,0,0.25,1)
      ease-in-out:以慢開始和結束,等於cubic-bezier(0.42,0,0.58,1)
      cubiz-bezier(n,n,n,n):【三次貝塞爾】在cubiz-bezier函數中定義本身的值,0~1。測試

    transition-delay:指定開始時間。默認0。
      逗號分隔多個屬性的延遲時間。
      -moz-transition: color 0.3s ease-out 2s;spa

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過分</title>
<style type="text/css">
/*案例*/
.t{
width:200px;
height:300px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s,height 2s; /* Firefox 4 */
-webkit-transition:width 2s,height 2s; /* Safari and Chrome */
-o-transition:width 2s,height 2s;/* Opera */
}
.t:hover{ width:300px; height:200px; }
/*測試 transition-timing-function*/
.bwh{width:100px;height:50px;background:#cccccc;border:1px solid red;}
.div1{ transition:width 2s; transition-timing-function: linear;/*規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))*/}
.div2{ transition:width 2s; transition-timing-function: ease-in;/*規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。*/}
.div3{ transition:width 2s; transition-timing-function: ease;/*規定慢速開始,而後變快,而後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))*/}
.div4{ transition:width 2s; transition-timing-function: ease-out;/*規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。*/}
.div5{ transition:width 2s; transition-timing-function: ease-in-out;/*規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))*/}
.bwh:hover{width:400px;}htm

/*測試透明度*/
.d{ width:200px;
height:100px;
background:black;
transition:opacity 3s;
-moz-transition:opacity 3s; /* Firefox 4 */
-webkit-transition:opacity 3s; /* Safari and Chrome */
-o-transition: opacity 3s;/* Opera */
}
.d:hover{opacity: 0.1;}
</style>
</head>
<body>
<div class="t"></div>
<div class="d"></div>
<div class="bwh div1"></div>
<div class="bwh div2"></div>
<div class="bwh div3"></div>
<div class="bwh div4"></div>
<div class="bwh div5"></div>
<div class="bwh div6"></div>
</body>
</html>ci

相關文章
相關標籤/搜索