<h2 class="heading">Hello World! </h2>
.heading{
  font-family: Verdana, sans-serif;
  font-size: 400%;
  padding-left:20px;
  color: rosybrown;
  animation-name: appear;
  animation-duration: 10s;
  animation-iteration-count: 3;
}

@keyframes appear{
  0%{ 
    opacity: 0;
  }
  20%{
    opacity: 0.2;
    font-size: 50%;
    color: navajowhite;
  }
  40%{
    opacity: 0.4;
    font-size: 100%;
    color: wheat;
  }
  60%{
    opacity: 0.6;
    font-size: 200%;
    color: burlywood;
  }
  80%{
    opacity: 0.8;
    font-size: 300%;
    color: tan;
  }
  100%{
    opacity: 1;
    font-size: 400%;
    color: rosybrown;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.