:root {
  font-family: 'Ruder Plakat', sans-serif;
  font-size: 20vh;
}

body {
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

span {
  animation-name: foo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  margin: 0px;

}

@keyframes foo {
  from {font-variation-settings: 'wdth' 75, 'wght' 400;}
  to {font-variation-settings: 'wdth' 100, 'wght' 700;}
 0% {
    background-color: red;
  }
  20% {
    background-color: orange;
  }
  40% {
    background-color: yellow;
  }
  60% {
    background-color: green;
  }
  80% {
    background-color: blue;
  }
  100% {
    background-color: violet;
  }
}

#s2 { animation-delay: 0.3s; }
#s3 { animation-delay: 0.6s; }
#s4 { animation-delay: 0.9s; }
#s5 { animation-delay: 1.2s; }
#s11 { animation-delay: 1.5s; }
#s22 { animation-delay: 1.8s; }
#s33 { animation-delay: 2.1s; }
#s44 { animation-delay: 2.4s; }
#s55 { animation-delay: 2.7s; }