css3動畫——transition（過渡）

用於規定元素不同狀態間變化所需時間，屬性值為一個時間值，單位（s/ms）； 初次接觸此屬性覺得有些麻煩，通過一段時間的學習，還是簡單做下過度知識的整理。

相關屬性

1.transition：屬性簡寫，用於在單個屬性中 同時可進行四個屬性值的設定。

div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s linear 2s, height 2s linear 2s;
}

div:hover
{
    width:200px;
    height:200px;
}
 

• 以上代碼運用了過渡簡寫屬性，其中transition屬性 規定了過度對象，過渡時間，過渡的時間曲線，過度的延遲。

2.transition-property：用於規定過渡效果所應用的對象。

3.transition-duration：用於規定過度效果所需時間。

4.transition-timing-functon：用於規定過渡效果時間曲線。

5.transition-delay：用於規定過度滿足條件與開始過度間的延遲。

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 200ms;
}
div:hover
{
    width:200px;
    height:200px;
}
 

• 以上第一行聲明指定過度對象為元素寬度（width）。
• 第二行聲明指定過渡所需時間（1s）。
• 第三行聲明規定過度的時間曲線（linear）。
• 第四行聲明規定過渡延遲時間（2s）。
• 註：以上方法改變了盒子尺寸，會對周圍布局造成一定的影響，為了達到動畫的視覺效果，又不影響布局，就需要用到css3 2D/3D轉換。

css3 2D/3D轉換——transform

• css2D/3D轉換又經常被稱作css動畫
• 2D/3D轉換不會因對周圍布局造成任何影響。

相關屬性值

• rotate（理解為旋轉）
• translate（理解為移動）
• skew（理解為傾斜）
• scale（理解為縮放）
• majtrix（將以上屬性值簡寫在一起）
• 以上使用較多（常見）在元素的點擊/懸停效果

1.rotate（旋轉）

鼠標懸停時旋轉實現方法：

div{
width：100px；
height：100px；
transition-duration：2s；
transition-delay：2s；

}
div:hover{
transform:rotatez(45deg)    
transform:rotatex(45deg)
transform:rotatey(45deg)
}

• 以上代碼第一段規定了元素所有屬性變化過渡時間為2s，延遲為2s。
• 第二段規定了元素被懸停時transform屬性為rotatey（45deg）（以y軸順時針旋轉45度），rotate取值若果是負數，旋轉方向為逆時針。（3D動態效果）
• rotatex（45deg），規定元素以x軸順時針旋轉45度。（3D動態效果）
• rotatez（45deg），規定元素以z軸順時針旋轉45度。（2D動態效果）
• 實現了元素在鼠標懸停時2s後，以y軸順時針旋轉45度，選轉過程2s。

2.translate（移動）

鼠標懸停移動實現代碼：

div{
width：100px；
height：100px；
transition-duration：300ms；
}
div：hover
{
transform：translate（50px，50px）
}

• 代碼第一段規定元素屬性變化過程的過渡時間為3s。
• 代碼第二段規定元素背懸停時，元素項x軸正方向移動50px，向y軸正方向移動50px，當transform取值為負數時，移動方向則為負方向。
• 以上就能實現規定元素背懸停時移動的量。

3.scale（縮放）

鼠標懸停時縮放實現代碼：

div{
width：100px；
height：100px；
transition：2s；
}
div：hover
{
transform：scale（0.4，2）；
}

• 代碼第一段依然是規定元素變化過渡時間2s。
• 第二段規定元素x軸方向尺寸縮放比列為0.4倍（縮小），y軸方向尺寸縮放比例為2倍（放大）。
• 以上代碼實現元素背懸停時使用2s時間進行規定尺寸的縮放。

4.skew（傾斜）

常用於改變元素盒子形狀 實現代碼：

div{
width:100px;
height:100px;
transform:slew(20deg,40deg);        
}

• 以上規定元素以元素y軸中線逆時針傾斜20度，以x軸中線逆時針傾斜40度。

利用以上的屬性，就可以實現一些簡單的頁面動畫，時我們的頁面更具有觀賞性，代碼更簡潔。

CSS3——動畫效果