對 CSS text-decoration underline 加上動畫效果

總結

想做出「滑鼠滑到超連結元件時,文字底線逐漸顯現」的效果,發現 transition: text-decoration 不管用,但可透過 transition: text-decoration-color 來實現。

筆記

下面的寫法很直覺但無效:滑鼠滑過去時底線會直接浮現,不會有漸變效果。

a {
  text-decoration: none;
  transition: text-decoration 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

理由:參考 MDN: text-decoration 中關於 Animation type 的說明,會發現 text-decoration-style 與 text-decoration-line 皆被標註為 discrete,亦即這兩組 CSS 樣式在樣式變化時,不會有補幀效果:

stackOverFlow: Discrete animations proceed from one keyframe to the next without any interpolation.

w3c 對 discrete 的定義如下:

w3c: The property’s values cannot be meaningfully combined, thus it is not additive and interpolation swaps from Va to Vb at 50% (p=0.5)

但 text-decoration-color 是能表現出動畫效果的,所以如果只是要「滑鼠滑過,底線慢慢浮現」的效果,可透過以下方式達成:

a {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

a:hover {
  text-decoration-color: black;
}

See the Pen transition: text-decoration-color by Charlie (@Charlie7779) on CodePen.

搞定。

參考文件