In your abc() function, you should also remove h1cls class due to the fact that it still applies opacity: 0 style.

 function abc(){
    document.querySelector('.h1cls').classList.add('fadeIn')
    document.querySelector('.h1cls').classList.remove('h1cls')
 }

It is animating but then disappearing immediately. You need to tell the system to keep the final state of the animation. You do this with animation-fill-mode: forwards

Note that the animation will only run on the first click of the button.

You have to add animation-fill-mode:forwards; property too in the fadeClass in order to make this work

function abc() {
  document.querySelector('.h1cls').classList.add('fadeIn')
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 150ms;
  animation-timing-function: linear;
  /*animation-delay: 5000ms;*/
  animation-fill-mode:forwards; // add this line
  /*opacity:1;*/
}

.one .two .h1cls {
  opacity: 0;
}

<div class="one">
  <div class="two">

    <h1 class="h1cls">hello</h1>
    <div></div>

    <button onclick="abc()">asd</button>