Style

Css Transition

CSS 過渡允許您在給定的持續時間內平滑地更改屬性值

transition:將四個過渡屬性設置為一個屬性的簡寫屬性

ex:鼠標懸停在 div 元素上時為 width 屬性指定一個值:
transition: width 2s;

1
2
3
4
5
6
7
8
9
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}

transition-duration:指定過渡效果需要多少秒或毫秒才能完成

transition-property:指定過渡效果所針對的 CSS 屬性的名稱

transition-timing-function:指定過渡效果的速度曲線

ease- 指定一個緩慢開始，然後快速，然後緩慢結束的過渡效果（這是默認值）
linear- 指定從開始到結束具有相同速度的過渡效果
ease-in- 指定一個緩慢啟動的過渡效果
ease-out- 指定一個緩慢結束的過渡效果
ease-in-out- 指定開始和結束緩慢的過渡效果
cubic-bezier(n,n,n,n)- 允許您在三次貝塞爾函數中定義自己的值

transition-delay:指定過渡效果的延遲（以秒為單位）

ex:transition-delay: 1s;

1
2
3
4
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;