<div class="block"><h1>Заголовок</h1></div>
<style>
.block{
overflow:hidden;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
  border: 1px solid black;
}
.block h1{
position:relative;
  top:30px;
  
  
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

</style>
<script>
let h1 = document.querySelector(".block h1")
window.onload = function(){
    h1.style = `
    
   top:0px ;
transition-delay: 1s;


  transition-duration: 1s;

   `
}

</script>