div spans {
  display: block;

  will-change: filter, color;
  filter: saturate(60%);
  animation: flicker steps(100) var(--interval) 1s infinite;
}

spans.b1 {
  --interval: 1s;
  color: yellow;
  --color1: goldenrod;
  --color2: orangered;
  --color3: mediumblue;
  --color4: purple;
  font-family: Gruppo;
}

spans.b2{
  --interval: 1s;
  color: lightpink;
  --color1: pink;
  --color2: orangered;
  --color3: red;
  --color4: magenta;
  font-family: Bad Script;
}

spans.b3{
  --interval: 1s;
  color: lightyellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: mediumblue;
  font-family: Kumar One Outline;
}

spans.b4{
  --interval: 1s;
  color: lightyellow;
  --color1: gold;
  --color2: firebrick;
  --color3: pink;
  --color4: red;
  font-family: Londrina Outline;
}


spans.b5{
  --interval: 1s;
  color: azure;
  --color1: azure;
  --color2: aqua;
  --color3: dodgerblue;
  --color4: blue;
  font-family: Sriracha;
}

spans.b6{
  --interval: 1s;
  color: tomato;
  --color1: orangered;
  --color2: firebrick;
  --color3: maroon;
  --color4: darkred;
  font-family: Yellowtail;
}

spans.b7{
  --interval: 1s;
  color: lightyellow;
  --color1: yellow;
  --color2: orange;
  --color3: brown;
  --color4: purple;
  font-family: Bad Script;
}

spans.b8{
  --interval: 1s;
  color: yellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: darkgreen;
  font-family: Monoton;
}

spans.b9{
  --interval: 1s;
  color: lightyellow;
  --color1: yellow;
  --color2: gold;
  --color3: orange;
  --color4: darkred;
  font-family: Sriracha;
}

spans.b10{
  --interval: 1s;
  color: lightyellow;
  --color1: lightyellow;
  --color2: lime;
  --color3: green;
  --color4: darkgreen;
  font-family: Monoton;
}
spans.b11{
  color:#FFF;
}


@keyframes flicker {
  50% {
    color: white;
    filter: saturate(200%) hue-rotate(20deg);
  }
}