JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containerHeader" onload="delayForHeader"> <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

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