在css中的特定時間在交互中暫停動畫

Question

我想在重複動畫之間的特定時間暫停動畫

我會從json文件中提取數據， 1秒暫停，2秒暫停，3秒暫停，4秒暫停。

我只能使用javascript/css hacks來暫停動畫。

Animation is purely made in CSS. 

https://codepen.io/prax/pen/WORMEJ 

在此先感謝

Answer 1

在任何你「獲取數據」功能，適用於animation-play-state: paused;要暫停的元素，然後刪除，當你準備取消暫停。

這是一個演示。

document.getElementById('button').addEventListener('click',function() { 
 
    // fetch data & pause & setTimeout to un-pause 
 
    document.getElementById('div').classList.add('pause'); 
 
    var seconds = 1; // use a different value to pause for different times 
 
    var timeout = setTimeout(function() { 
 
    document.getElementById('div').classList.remove('pause'); 
 
    },seconds * 1000) 
 
})

div { 
 
    animation: foo 3s infinite; 
 
} 
 
@keyframes foo { 
 
    50% { 
 
    color: red; 
 
    } 
 
} 
 
.pause { 
 
    animation-play-state: paused; 
 
    background: #eee; 
 
}

<div id="div">asdf</div> 
 
<button id="button">button</button>