css的過渡特效

在web端，我們實作很多有意思的效果，比如：元素的淡入淡出、菜單滑入顔色切換等等效果。

那這些效果最簡單的方式就是過渡【transitions】，過渡是一個變化時。css的過渡，可以使用‘ease’來描述這個變化的狀态。

transitions有四個屬性：

transition-property: 設定哪些屬性需要過渡，預設是all，表示是所有屬性都生效，如果隻想在某一個屬性上設定過渡效果的話，直接在transitions-property屬性指定該屬性即可。

transition-duration: 過渡持續的時間，設定時間需要帶機關；

transition-timing-function：設定屬性是如何變化的，也就是變化率如何加速或者減速。比如ease或者linear。

transition-delay: 延遲時間，也就是過渡生效之前的一個延遲時間。

這四個屬性的簡寫為transitions：transition-property transition-duration transition-timing-function transition-delay

案例：按鈕的背景顔色、border-radius設定過渡效果。

button {
    background-color: hsl(180, 50%, 50%);
    border: 0;
    color: white;
    font-size: 1rem;
    padding: 0.3em 1em;
    transition-property: all;
    transition-duration: 2s;
    transition-delay: 0.2s;
    transition-timing-function:ease-in-out;
  }
  button:hover {
    border-radius: 1em;
    background-color: hsl(0, 50%, 50%);
  }