当CSS3动画的display属性设置为none时，它是否仍然运行？

Question

我有一个进度条，我在页面加载时使用CSS制作动画。在我的页面加载完毕后，我使用Javascript将进度条的display属性设置为none，因此将显示页面内容。问题是：当动画的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>