CSS3アニメーションは、displayプロパティが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>