/* essential styling */
body {
	--c0: #ff9800;
	--c1: #3c3c3c;
	background: linear-gradient(90deg,
		var(--gc0, var(--c0)) var(--stop, 0%), 
		var(--gc1, var(--c1)) 0)
}

/* just to prettify stuff */
body:after {
	/* use absolute positioning because 
	* margin: 0 on body 
	* breaks Edge for some reason */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font: calc(16vmin + 3rem)/100vh Leckerli One, cursive;
	text-align: center;
	cursor: pointer;
	content: 'Click!'
}

/* in supports because 
* background: inherit 
* breaks Edge for some reason 
* (sorry, I had no better idea) */
@supports (mix-blend-mode: screen) {
	body:after {
		background: inherit;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		filter: invert(1) grayscale(1) contrast(3);
	}
}
const NF = 50, 
			S = document.body.style;

let rID = null, f = 0, typ = 0;

function stopAni() {
  cancelAnimationFrame(rID);
  rID = null;  
};

function update() {
	let k = ++f/NF;
  
  S.setProperty('--stop', `${+(k*100).toFixed(2)}%`);
  
  if(!(f%NF)) {
		f = 0;
		S.setProperty('--gc1', `var(--c${typ})`);
		typ = 1 - typ;
		S.setProperty('--gc0', `var(--c${typ})`);
		S.setProperty('--stop', `0%`);
    stopAni();
    return;
  }
  
  rID = requestAnimationFrame(update);
};

addEventListener('click', e => {
  if(!rID) update();
}, false);
View Compiled
Rerun