CSS @keyframes在显示无后转换动画闪烁

Question

我想用@keyframes变换翻译来取代具有平滑动画的渐弱场所，然后显示：无
不幸的是，它似乎显示：没有拖动动画内容片刻，所以它眨眼:(
有些次，如果将@keyframes更改延迟到几毫秒更少，那就不行了 有一些方法可以适应这些动画吗？ //也许没有CSS？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

用

修复

＆＃13;

＆＃13;

setTimeout(fade, 1000);

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;