我想在重复动画之间的特定时间暂停动画
我将从json文件中获取数据,例如暂停1秒,暂停2秒,暂停3秒,暂停4秒。
我只能使用javascript / css hack来暂停动画。
Animation is purely made in CSS.
https://codepen.io/prax/pen/WORMEJ
提前致谢
最佳答案
无论使用什么“获取数据”功能,对要暂停的元素应用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>