<div class="wrapper">
  <h1>Background Gradient Animation</h1>
</div>

@import url(https://fonts.googleapis.com/css?family=Lato:300,700,300italic);

$pp-purple: #861a54;
$pp-blue: #054f7d;
$pp-ltblue: #00a7cf;
$sp-yellow: #efe348;

html, body {
  height: 100%;
}
.wrapper {
  align-items: center;
  background-image: linear-gradient(to right, $pp-blue,$pp-ltblue,$sp-yellow,$pp-purple,$pp-blue);
  background-size: 600%;
  background-position: 0 0;
  box-shadow: inset 0 0 5em rgba(0,0,0,.5);
  display: flex;
  font-family: 'Lato', Arial, sans-serif;
  height: 100%;
  justify-content: center;
  /* Animation */
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: gradients;
}
h1 {
  color: white;
  font-size: 2.4em;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 830px) {
  h1 {
    font-size: 2em;
  }
}
@keyframes gradients {
    0%   {background-position: 0 0;}
    25% {background-position: 50% 0;}
    50% {background-position: 90% 0;}
    60% {background-position: 60%;}
    75% {background-position: 40%;}
    100%  {background-position: 0 0;}
}