box-shadow: 10px 10px 10px -5px gray; applied in stages

dabblet.css

/**
 * box-shadow: 10px 10px 10px -5px gray; applied in stages
 */

@keyframes box-shadow {
	from { box-shadow: 0 0 orange }
	10% { box-shadow: 10px 0 orange } /* x offset */
	20% { box-shadow: 10px 15px orange } /* y offset */
	30% { box-shadow: 10px 15px 0 -5px orange } /* spread */
	40% { box-shadow: 10px 15px 0 -5px gray } /* color */
	60% { box-shadow: 10px 15px 10px -5px gray } /* blur */
}

h1 {
	width: 12em;
	padding: 1em;
	background: orange;
	box-shadow: 10px 15px 10px -5px gray;
	animation: 10s box-shadow infinite linear;
}

dabblet.html

<h1><code>box-shadow: 10px 15px 10px -5px gray;</code> applied in stages</h1>

settings.json

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