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

Question

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

Answer 1

答案是不。
当您设置 element 时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>