Static interpolation via paused animations

dabblet.css

/**
 * Static interpolation via paused animations
 * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
 * Currently works in every modern browser except Safari
 */

@keyframes foo {
	from { background: red }
	to { background: yellowgreen }
}

div {
	display: inline-block;
	width: 100px; height: 100px;
	
	animation: foo 1s both linear;
	animation-play-state: paused;
}

div:nth-of-type(2) { animation-delay: -.2s; }
div:nth-of-type(3) { animation-delay: -.4s; }
div:nth-of-type(4) { animation-delay: -.6s; }
div:nth-of-type(5) { animation-delay: -.8s; }
div:nth-of-type(6) { animation-delay: -1s; }

dabblet.html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

dabblet.js

// alert('Hello world!');

settings.json

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

This won't actually work in Safari, IE or Edge in any version.

Negative animation-delay is handled by the specification – if animation-delay is to be applied for animations with animation-play-state: paused; is not, so I would not bet on Safari or Edge changing their interpretation anytime soon.

You can do this WebAnimations, so I wrote a library to give you this technique in a cross-browser compatible way: https://github.com/marionebl/jogwheel