I am having a problem to make my text delay, for that I am using setTimeout function [duplicate]

Please help me and tell how can I fix this problem
I have tried changing the format a lot but this problem is still there, actually I am beginner who has leant web developing from the internet only.

Here’s my code of html, css and JavaScript –

**HTML**
<div class="sub-heading">
      <h3>Wants high quality fini....... This place is for you</h3>
    </div>

**CSS**
.sub-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  transition: 3s;
  visibility: hidden;
}

**JavaScript**
let myTimeOut = setTimeout(myFunction, 3000);

function myFunction() {
    document.getElementsByClassName("sub-heading").style.visibility = "visible";
}

Please help me and tell how can I fix this problem
I have tried changing the format a lot but this problem is still there, actually I am beginner who has leant web developing from internet only.