Emulating caret-color in WebKit/Blink

dabblet.css

/**
 * Emulating caret-color in WebKit/Blink
 * Warning: NON-STANDARD. Your text will be shown with the caret color in Firefox, despite the @supports.
 */

@keyframes rainbow {
	9% { color: yellow }
	27% { color: orange }
	45% { color: lime }
	63% { color: aqua }
	81% { color: blue }
	90% { color: fuchsia }
}

textarea {
	font-size: 500%;
	height: 5em;
	color: red;
}

@supports(-webkit-text-fill-color: black) {
	/* @supports here doesn't do much, since all browsers have implemented -webkit-text-fill-color
	   for web compat, but they implemented it incompatibly it seems :( */
	textarea {
		-webkit-text-fill-color: black;
		animation: 10s rainbow infinite; /* Animatable too! */
	}
}

dabblet.html

<textarea>Click here and notice how the blinking caret is a different color than the text!</textarea>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}