對 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.
搞定。