CSS 的文字抹除效果

發表於 更新於 分類於 Disqus：

在接專案時遇到了不少動畫的需求，其中一個比較抽象，是關於文字出現時的動畫效果。我用兩種方式比喻。（一）就像是打字時文字慢慢出現，但不是突然地，而是平滑地由左往右浮現（二）就像是拿橡皮擦由右往左擦時文字消失，然後把這段影像往回播放的樣子

用 CSS 產生文字擦除效果

若只是單純的將文字逐步出現的話是相對簡單的，只要將文字元素的母元素套上 overflow: hidden，配合 css animation 改變文字元素的母元素的寬度就好。這是類似效果的範例：

不過當時我看到的需求說「我想要有一點霧霧的感覺」。一時覺得不曉得該怎麼處理 QQ 後來 google 很久後，看到有人做出很相似的效果，就參考了它的語法。相較於前面 overflow 的掩蓋住溢出的文字與動態改變寬度，後一種則是則是用了 mask 系列的 CSS 屬性。放上範例

See the Pen text-erasing-reverse by Chiu (@ayugioh2003) on CodePen.

CSS Masking 真的是很迷的屬性，查了一下 MDN 似乎是跟遮罩相關的屬性，規範在 CSS Masking Module Level 1 中。要不是為了這個文字抹除效果，我大概不會發現這個屬性 orz

參考資料