<div class="simple">
  I'm so animated, but I animate once! Refresh me to see again.
</div>

body {
  background: #000000;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding:10px;
  font-family: 'Roboto Mono', monospace;
}


div.simple {
  width: 80%;
  height: 400px;
  background-color: orange;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  animation-name: simple;
  animation-duration: 5s;
}

@keyframes simple {
  from {background-color: orange; color: black;}
  to {background-color: green; color: white;}
}