JSFiddle - React, Tailwind, and code Playground

HTML

<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;">blink</div>

CSS

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

JavaScript

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