[css] 讓 CSS 動畫重新開始

前一陣子在做 CSS 動畫的時候，遇到了特定情況會希望動畫重新開始的狀況

像是每點擊一次按鈕就觸發一次動畫的情境，查了一下相關的做法．記錄在這

---

舉個例子，我們有個 fade-in 的動畫，希望在點擊文字時重新開始動畫

<style>
@keyframes fade-in {        
  from {
    opacity : 0;
    left : -500px;
  }
  to {
    opacity : 1;
    left : 0;
  }      
}

.fade-in {
  position: relative;
  animation: fade-in 2s ease;
}
</style>
<h1 class="fade-in">
  Animation Text (click to restart)
</h1>

這時候你可能會很直覺認為再次添加 fade-in class ，像是以下這樣

See the Pen restart css animation by camel2243 (@camel2243) on CodePen.

然後你會發現不 work，於是直覺會想說那先做 remove 再 add XD

See the Pen css animation demo1 by camel2243 (@camel2243) on CodePen.

結果發現還是不會動，只好開 setTimeout 大絕 www

See the Pen css animation demo3 by camel2243 (@camel2243) on CodePen.

雖然看起來不是很好，但是 It’s works!

這邊另外提供一種比較取巧的方式:

• 觸發瀏覽器重新 render

See the Pen css animation demo4 by camel2243 (@camel2243) on CodePen.

參考資料：

https://css-tricks.com/restart-css-animation/