技術標籤：css3

transition

transition有四個屬性：

1. transition-property:需要參與過渡的屬性，例如：width、height、background…
2. transition-duration:過渡動畫的持續時間，單位秒s或毫秒ms
3. transition-delay：延遲過渡的時間，單位秒s或毫秒ms
4. 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.42,0,1,1)

ease-out //慢速結束的過渡， cubic-bezier(0,0,0.58,1)
ease-in-out //慢速開始和結束的過渡， cubic-bezier(0.42,0,0.58,1)
（可自定義速率）cubic-bezier(n,n,n,n) //在 cubic-bezier 函式中定義自己的值。可能的值是 0 ~1 之間的數值。

transition的簡寫方式

如下例子：

div{
  width:100px;
  height:100px;
  background:blue;
  transition:width 1s 1s ease-out ;
}

div:hover{
  width:300px;
}
 

如果是多個，如下寫法：

div{
    width:100px;
    height:500px;
    background:teal;
    /* 而且我還能多個屬性逐個顯示過渡動畫效果哦~~*/
    transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;
}
/* 滑鼠懸停，改變div的樣式 */
div:hover{
    width:500px;
    height:100px;
    background:hotpink;
}