JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<input type="button" name="" id="" value="zweite" onclick="showzweite();" /><br />
<div id="zweite">
           ...blablabla
</div>

CSS

#zweite {
 
display: none;
 
   width: 100%;
   height: 60%;
   background: url('images/zweites.jpg') no-repeat top center;
   background-size: 100%;
   position: absolute;
   top: 0%;
   left: 0%;
   opacity: 1.0;
   z-index: 100;
animation: movingzweite 3s;  
}
 
@keyframes movingzweite {
  100% {
  transform: translate(0px, 0px);
  }
  0% {
  transform: translate(0px, 600px);
  }
}

JavaScript

function showzweite() {
  document.getElementById('zweite').style.display = "block";
}