当 CSS3 动画的显示属性设置为 none 时，它是否仍会运行?

Question

我有一个进度条，我在页面加载时使用CSS进行动画处理。页面加载完成后，我将进度条的display属性设置为none使用 Javascript，因此将显示页面内容。问题是：当动画display属性设置为none时，动画是否仍在后台运行？

Answer 1

答案是否定的。
设置元素display:none时，动画将停止。当元素再次display: block时，动画将在起点重新开始。
请参阅示例：

let test1 = document.getElementById('test1');
let test2 = document.getElementById('test2');
let test3 = document.getElementById('test3');
setTimeout(() => {
test1.style.display = 'none';
}, 1000)
setTimeout(() => {
test1.style.display = 'block';
}, 2000);
setTimeout(() => {
test2.style.display = 'none';
}, 6000)
setTimeout(() => {
test2.style.display = 'block';
}, 7000);
document.getElementById('btn').addEventListener('click', () => {
location.reload();
})

.test {
width: 30px;
height: 30px;
background-color: #123;
animation: test 4s;
}
#test2 {
background-color: green
}
#test3 {
background-color: blue
}
@keyframes test {
0% {
width: 30px
}
100% {
width: 1000px;
}
}

<div>div 1: 1s display none, 2s display block</div>
<div class="test" id="test1"> </div>
<div>div 2: 6s display none, 7s display block</div>
<div class="test" id="test2"> </div>
<div>div 3: no change</div>
<div class="test" id="test3"> </div>
<br>
<button id="btn">Reload</button>