Edit on
<h1>The Spooky Box</h1>
<p>The dimensions of type on the web are defined by a combination of font-size and line-height - there is no concept of a typographic baseline.</p>
h1 {
  font-size: 2rem;
  display: inline-block;
}

h1, p {
  max-width: 36em;
  margin: 0 auto 1.5rem;
  animation: spooky 5s ease infinite 0s both;
}

body {
  font-family: "Helvetica Neue",Arial,sans-serif;
  text-align: center;
  padding: 1.5rem;
  line-height: 1.6;
  background: #4b4c57;
  color: #fff;
}

@keyframes spooky {
  0%, 100% {
    background: #8232d2;
  }
  50% {
    background: transparent;
  }
}
View Compiled
Rerun