<div>
  <h1>
    Keyframes
  </h1>
</div>
h1 {
  animation: rainbow 4s ease 2s infinite reverse;
  font-family: 'Rubik', sans-serif;
  font-size: 2em;
  font-style: italic;
  text-shadow: 2px 4px 0px #1afe48;
}

@keyframes rainbow {
  20% {
    text-shadow: 2px 4px 0px #ff00a0;
  }
  40% {
    text-shadow: 2px 4px 0px #fe75fe;
  }
  60% {
    text-shadow: 2px 4px 0px #ff0000;
  }
  80% {
    text-shadow: 2px 4px 0px #73fffe;
  }
}

body {
  font-family: 'Roboto Mono', monospace;
  height: 100vh;
}

div {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.