CSS @keyframes翻譯動畫在顯示後閃爍無

我想使用@keyframes變換平滑的動畫來代替衰落的地方，然後顯示：無
不幸的是，它看起來像顯示：沒有將動畫內容拖回片刻使其閃爍:(
一些時候，它如果不改變@keyframes延遲幾毫秒少
有一些方法，以適應這些動畫？
//也許沒有CSS呢？CSS @keyframes翻譯動畫在顯示後閃爍無

var delayForHeader = setInterval(fade, 1000); 
 
var s = document.getElementById('containerHeader').style; 
 
var bodyMove = document.getElementById('change'); 
 
function fade(){ 
 
\t s.transition="opacity 1s"; s.opacity=0; 
 
\t setTimeout(function(){bodyMove.className="moveUp animated";},1000); 
 
\t setTimeout(function(){s.display="none";},2000);  
 
\t }

\t .moveUp { 
 
      animation-name: def; 
 
     } 
 
\t .animated { 
 
      animation-duration: 1s; 
 
      animation-fill-mode: forward; 
 
     } 
 
@keyframes def { 
 
      0% { 
 
       transform: translateY(0px); 
 
      } 
 
      100% { 
 
       transform: translateY(-243px); 
 
      } 
 
     }

<div id="containerHeader" onload="delayForHeader"> <p style="background-color: green; display:block; padding: 100px;"> stackowerflow <3 </p> </div> 
 
<div id="change" style="background-color: black; display: block; padding: 20px; color: white;">blink</div>

來源

2017-07-16 dsfxcvyut

它的'forwards'，不'forward'。 –

我的道歉，應該是「沒有」。無論如何它不會改變任何東西 – dsfxcvyut

固定

setTimeout(fade, 1000); 
 

 
var cnt = document.getElementById('containerHeader'); 
 
cnt.addEventListener("transitionend", function() { 
 
    \t bodyMove.className="moveUp animated"; 
 
}) 
 

 
var bodyMove = document.getElementById('change'); 
 
bodyMove.addEventListener("animationend", function() { 
 
    s.display = "none"; 
 
}); 
 

 
var s = cnt.style; 
 
function fade(){ \t 
 
\t s.transition="opacity 1s"; 
 
    s.opacity=0; 
 
}

.moveUp { 
 
      animation-name: def; 
 
     } 
 
\t .animated { 
 
      animation-duration: 1s; 
 
      animation-fill-mode: forward; 
 
     } 
 
@keyframes def { 
 
      0% { 
 
       transform: translateY(0px); 
 
      } 
 
      100% { 
 
       transform: translateY(-243px); 
 
      } 
 
     }

<div id="containerHeader"> <p style="background-color: green; display:block; padding: 100px;"> суп </p> </div> 
 
<div id="change" style="background-color: black; display: block; padding: 20px; color: white;">not blinking</div>

來源

2017-07-30 21:07:53 dsfxcvyut

CSS @keyframes翻譯動畫在顯示後閃爍無

回答

相關問題