cascading pride flags

pride-flags.css

.rainbow {
  width: 50em;
  height: 10em;
  background: linear-gradient(to left, #ff00ff, #0000ff, #00ffff, #00ff77, #00ff00, #00ff00, #ffff00, #ff7700, #ff0000);
  /* animation: widen 10s infinite; */
}

.trans-flag {
  width: 50em;
  height: 10em;
  background: linear-gradient(to right, #5BCEFA, #F5A9B8, #FFFFFF, #F5A9B8, #5BCEFA);
  /*! animation: widen 10s infinite; */
}

.enby-flag {
  width: 50em;
  height: 10em;
  background: linear-gradient(to right, #FFF42F, #FFFFFF, #9C57CF, #000000);
  /*! animation: widen 10s infinite; */
}

@keyframes widen {
  from {
    width: 0em;
  }
  
  to {
    width: 50em;
  }
}