131 字
1 分鐘
[JS/CSS] 重新啟動 CSS 動畫
今天我們有個 css 動畫，假設長這樣：
.title-main-title{ animation: title-name-anim 0.5s ease-out; animation-delay: calc(0.04s);}@keyframes title-name-anim{ 0% {transform: translateY(0); } 40% {transform: translateY(-0.87em); } 60% {transform: translateY(-0.87em);} 100% {transform: translateY(0);}}因為沒有設定 loop (aka animation-iteration-count) 次數，所以只會在頁面載入時執行一次。
重開動畫
如果我們想用程式控制它再跑一遍動畫，可以利用重新添加關聯 (e.g. className) 達成：
function resetCssAnim(className) { let element = document.getElementsByClassName(className)[0] element.classList.remove(className) void element.offsetWidth; // magic element.classList.add(className)}暫停動畫
element.style.webkitAnimationPlayState = "paused";// ...element.style.webkitAnimationPlayState = "running";以上紀錄。
[JS/CSS] 重新啟動 CSS 動畫
https://fuwari.vercel.app/posts/js-css-重新啟動-css-動畫/