CSS3過渡屬性transition

transition的屬性

屬性能夠分開寫，也能夠放在一塊兒寫

經常使用寫法：transition：transform（名稱） 1.2s（過渡時間） linear（過渡方式） 2s（過渡開始時間）

 

html代碼

<div class="content">
        <div class="allpic">
            <div class="pic pic1">
                <img src="703.jpg" width="150px" height="150px">
            </div>
            <div class="pic pic2">
                <img src="703.jpg" width="150px" height="150px">
            </div>
            <div class="pic pic3">
                <img src="703.jpg" width="150px" height="150px">
            </div>
            <div class="pic pic4">
                <img src="703.jpg" width="150px" height="150px">
            </div>
        </div>
    </div>

css代碼

*{  margin: 0px;padding: 0px;  }
.content{
    width: 80%;  height: 700px;  margin: 0 auto;  background-color: aqua;
}
.allpic{
    width: 800px;  height: 700px;  margin: 0 auto;
}
.pic{
    float: left;  padding: 5px;  margin: 15px;  border: 1px solid darkgray;
}

/*CSS過渡*/
.pic1{
    transition: transform 1.2s linear;
}
.pic1:hover{
    transform: rotate(180deg);
}

.pic2{
    transition: transform 1.2s linear;
}
.pic2:hover{
    transform: scale(1.2);
}

.pic3{
    transition: transform 1.2s linear;
}
.pic3:hover{
    transform: skew(60deg);
}

.pic4{
    transition: transform 1.2s linear;
}
.pic4:hover{
    transform: translate(10px);
}

注：此處省略了瀏覽器兼容性代碼，方便細看

 

屬性詳解

transition-property

不是全部屬性都能過渡，只有屬性具備一箇中間點值才具有過渡效果。見http://leaverou.github.io/animatable/

 

transition-duration

指定從一個屬性到另外一個屬性過渡所要花費的時間。默認值爲0，爲0時，表示變化是瞬時的，看不到過渡效果。

 

transiton-timing-function

過渡函數，有以下幾種：

     Ease：首尾變緩。

     Linear：線性變化。

     Ease-in：開始慢，後面快。

     Ease-out：開始塊，後面慢。

     Ease-in-out：首尾慢，中間快。

     cubic-bezier：三次貝塞爾曲線，自定義（不太懂）

 

觸發過渡（重要）

單純的代碼不會觸發任何過渡操做，須要經過用戶的行爲（如點擊，懸浮等）觸發，可觸發的方式有： 
:hover :focus :checked 媒體查詢觸發 JavaScript觸發

 

侷限性

transition的優勢在於簡單易用，可是它有幾個很大的侷限。 
（1）transition須要事件觸發，因此無法在網頁加載時自動發生。 
（2）transition是一次性的，不能重複發生，除非一再觸發。 
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。 
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。 

CSS Animation就是爲了解決這些問題而提出的。（見下章）