Transition可以讓元素在兩個不同的CSS style之間作轉換

讓網站更具互動性

要達到Trasition的動畫效果

首先要讓元素有兩種style 再加上transition

並且讓trasition有個trigger(啟動)的條件

直接來看要怎麼讓一個方形元素的背景色做變化

1
2
3
4
5
6
7
8
9
10
11
.rect{
  background-color:LightSeaGreen; /* 第一種style */
  width:100px;
  height:100px;
  transition-property: background-color; /* 選擇要做變化的style */
  transition-duration: 1s; /* 變化所需的時間 */
}
.rect:hover{ /* Hover是這個trasition的trigger */
  background-color:Tomato; /* 第二種style */
}

而這是針對一種Transition時可以這樣寫

如果一次有多個變化要一起表現呢？

1
2
3
4
5
6
7
8
9
10
11
.rect{
  /* ... */
  transition-property: background-color,width,height; /* 選擇所有要做變化的style並且用逗號隔開 */
  transition-duration: 1s,.5s,.8s; /* 個別變化所需的時間 */
}
.rect:hover{ 
  /* ... */
  width:150px; /* 新的變化 */
  height:150px; /* 新的變化 */
}

Transition Delay

如果想要讓某個transition延遲觸發

可以透過transition-delay來達成

來試著讓方塊在放大之後才開始變色

1
2
3
4
.rect{
  /* ... */
    transition-delay: .8s,0s,0s; /* 個別transition delay的時間 */
}

Transition Timing

Transition Timing 可以調整變化的過程的速度

CSS提供預設的5種keywords可以使用

linear, ease, ease-in, ease-out, and ease-in-out

1
transition-timing-function:linear;

cubic-bezier

Cubic-Bezier 可以讓我們更靈活的運用動畫

使動畫的變化更活潑

1
transition-timing-function: cubic-bezier(.20, .96, .74, .07);

用圖形來表示Cubic-Bezier

橫軸為時間，縱軸為動畫的進度

cubic-bezier

平緩的線代表動畫速度較慢

越陡的線代表動畫速度較快

要憑空想出來這個曲線是不可能的

所以推薦一個網站可以動態的去調整自己想要的曲線

cubic-bezier

Transition Shorthand

如果動畫一多起來

總不希望每個動畫都要寫一次CSS的property,duration之類的

CSS提供了下面的寫法來簡化

1
transition: all 1s ease-in .5s;

就可以一次將所有的設定套用在每個transition上面

也可以透過換行來定義不同的Transition

1
2
3
transition: background-color 1s ease-in .8s, /* 順序分別是style,duration,timing,delay */
			width .5s,
			height .8s;