<body>
    <header>
        <h1>This is a Header</h1>
    </header>
  </body>
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
body {
  margin: 0px;
  padding: 0px;
  font-family: "Courier Prime", monospace;
  background-color: #fdfdfe;
}
header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

header h1 {
  font-size: 70px;
  font-weight: 500;
  color: #553c9a;
  border-right: 4px solid #000;
  animation: cursor 1s infinite step-end, typing 15s infinite steps(16);
  white-space: nowrap;
  overflow: hidden;
}
@keyframes cursor{
  0%, 100%{border-color: transparent;}
  50%{border-color: #000;}
}

@keyframes typing{
  0%{ width: 0ch} /*Text is hidden*/
  30%{ width: 16ch;} /*The enitre header will be typed out*/
  80%{ width: 16ch;} /*Text stays visible*/
  90%{ width: 0ch;} /*Text is deleted*/
  100%{ width: 0ch;} /*Text stays hidden*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.