CSS @keyframes 翻译动画在显示无后闪烁答案

【问题标题】：CSS @keyframes translate animation blink after display noneCSS @keyframes 翻译动画在显示无后闪烁
【发布时间】：2017-12-21 01:06:06
【问题描述】：

我想使用@keyframes transform translate 来代替淡入淡出的地方，然后显示：none
不幸的是，它看起来像 display:none 将动画内容拖回来一会儿，所以它在闪烁 :(
有些如果将 @keyframes 延迟更改为少几毫秒，则不是
有什么方法可以适应这些动画？
//也许根本没有css？

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);      
	}

	.moveUp { 
            animation-name: def;
         }
	 .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>

【问题讨论】：

这是forwards，而不是forward。
抱歉，应该是 "none" 。无论如何它不会改变任何东西

标签： javascript css

【解决方案1】：

用

固定

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

.moveUp { 
            animation-name: def;
         }
	 .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>

【讨论】：