Why Transition properties does not work with display properties ?
CSS3 transition doesn't work with display property
display: none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead.
<div class="gui">
<header>Kreator klas</header>
<hr />
<input type="text" placeholder="Nazwa klasy, np. 8c" />
</div>
.gui {
position: relative;
background: #ffffff;
width: 732px;
height: 266.666666667px;
border: 2px solid #636363;
border-radius: 0px 100px 0px 100px;
box-shadow: -30px 30px 30px #000000;
left: 50%;
top: 50%;
opacity: 0;
transform: translate(-50%,-50%);
transition: opacity 2s;
}
Nie "używam" TypeScript , więc jest js.
window.onload = () => {
const gui = document.querySelector('.gui');
gui.style.opacity = 1;
}