總結CSS3新特性(Transition篇)

CSS 過渡（transition）, 是  CSS3  規範的一部分, 用來控制 CSS 屬性的變化速率。 可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，将元素的顔色從白色改為黑色，通常這個改變是立即生效的，使用 transition 後，将按一個曲線速率變化。這個過程可以自定義。

Transition是一個簡寫屬性,四個值(單獨使用均加transition-字首)的順序:

　　property

　　duration

　　timing-function

　　delay

過渡就是在一定時間内完成某屬性值的改變,是以,transition-duration一定要設定,因為它預設值為0;

Transition-Property:

 要過渡的屬性值,隻有被指定的屬性才會在過度時産生動畫效果,可以填all,all為所有

可動畫屬性

;

#demo {
    width:20px;
    height:20px;
    background-color:#0080FF;
    transition:width 1.5s;
}
#demo:hover {
    width:30px;
    height:30px;
}      

  隻會對width的改變産生動畫效果↓

  可以選擇多個屬性的值;

#demo {
    width:20px;
    height:20px;
    background-color:#0080FF;
    transition-property:width , height;/*寫多個值用逗号分割*/
    transition-duration:2s;/*過渡持續時間可以隻寫一個,也可分别指定,同樣用逗号分割*/
}      

 使用簡寫時指定多個屬性:

#demo {
    width:20px;
    height:20px;
    background-color:#0080FF;
    transition:width 2s, height 4s;/*兩條定義之間用逗号分割,後兩個值為選填.*/
}      

 使用子屬性時需要注意幾點:

#demo {
    transition-property:width , height , top;
    transition-duration:2s , 3s;/*定義時間個數少于屬性個數,會再次循環數組*/
}
/*相當于*/
#demo {
    transition-property:width , height , top;
    transition-duration:2s , 3s , 2s;
}      

#demo {
    transition-property:width , height;
    transition-duration:2s , 3s , 2s;/*定義時間個數多于屬性個數,多出的值會被截取*/
}
/*相當于*/
#demo {
    transition-property:width , height;
    transition-duration:2s , 3s;
}      

Transition-duration:

 設定過渡持續的時間,可以為秒或毫秒,本人了解為過渡就是通過設定的持續時間結合

緩動函數

計算相應的屬性值改變的曲線;

 比如4秒内寬度從100px過渡到200px,簡單的分為4幀(假設) 125px-150px-175px-200px;原理應該與animation的from to 類似;

過渡持續2s

過渡持續4s

過渡持續8s

Transition-timing-function:

 設定過渡動畫的曲線,這裡是

W3School的示例

,裡邊用到了是幾個常用的,浏覽器裡内置的幾種動畫曲線,還可以通過cubic-bezier(n,n,n,n)來進行定制,n為0-1之間的值;

 挺全的一個

集合,預設不設定時,為ease,慢速開始,然後變快再慢速結束;

Transition-delay:

 設定動畫開始前的等待時間(預設為0,無延遲);

滑鼠懸浮2s後拉伸

總結:

 使用Transition能使頁面看上去更富有動感,下面是一個按鈕的簡單例子;

Hover me Hover me

.demo-button {
  border:0px;
  background-color:#2aaacb;
  position:relative;
  padding:0.7em 1.8em;
  font-size:1.1em;
  border-radius:3px;
  margin-right:2em;
  color:#fff;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.demo-button:before {
  content: "";
  z-index:-1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3BD1F8;
  top: 0;
  left: 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#transition-demo1:before {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
#transition-demo1:hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
#transition-demo2:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
#transition-demo2:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}      

結合transform做的按鈕,主要是用到了:before元素,實作這種效果預設時縮小為不可見,hover時還原元素大小,縮放X,Y軸的改變實作了兩個不同的button;

本文如有不足或錯誤,還請指出.共同學習;

部分參考資料:

MDNCSS過渡 MDN使用CSS過渡 W3School_CSS過渡 緩動函數集合