-<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Figure</title><style type="text/css">html {background: silver;}body {background: white; margin: 1em; padding: 1em;}.diagram {height: 100px; width: 1000px; background: linear-gradient(to right, #CCC 10%, 10%, #BBB 20%, 20%, #AAA 30%, 30%, #999 40%, 40%, #888 50%, 50%, #777 60%, 60%, #666 70%, 70%, #555 80%, 80%, #444 90%, 90%, #333 100% );}.label {text-align: center; font: 2em Arvo, serif;}section .label {background: url(i/anim-arrow.png) no-repeat 0 100% / 900px 40px; width: 1000px; padding: 30px 0; margin: 0;}#dg02 + .label {background-position: 100px 0;}body:hover {background: #FFE;}body:hover * {animation-play-state: paused;}.stepanim {height: 100px; width: 100px; background: green; color: white; display: flex; justify-content: center; align-items: center; font: 2em Arvo, serif; animation: stepcolor 7.5s steps(10,end) forwards, stepmove 7.5s steps(10,end) forwards;}#an02 {animation-timing-function: steps(10,start), steps(10,start);}@keyframes stepcolor { from {background: #CCC;} to {background: #333;}}@keyframes stepmove { from {margin-left: 0;} to {margin-left: 1000px;}}</style></head><body><p class="label">Hover the mouse pointer over the <code>body</code> (the white area) to pause animations.</p><section><p class="label">end</p><div id="dg01" class="diagram"></div><div id="an01" class="stepanim">end</div><div id="an02" class="stepanim">start</div><div id="dg02" class="diagram"></div><p class="label">start</p></section></body></html>
0 commit comments