Untitled

dabblet.css

@keyframes go {
     from { background: hsl(0,100%,50%); }
     12.5% { background: hsl(45,100%,50%); }
     25% { background: hsl(90,100%,50%); }
     37.5% { background: hsl(135,100%,50%); }
     50% { background: hsl(180,100%,50%); }
     62.5% { background: hsl(225,100%,50%); }
     75% { background: hsl(270,100%,50%); }
     87.5% { background: hsl(315,100%,50%); }
     to { background: hsl(360,100%,50%); }
 }
  div {
     float: left;
     width: 50px;
     height: 100px;
     animation: go 10s steps(1000) infinite;
 }
 div:nth-of-type(0) { animation-delay: -10s; }
 div:nth-of-type(1) { animation-delay: -9s; }
 div:nth-of-type(2) { animation-delay: -8s; }
 div:nth-of-type(3) { animation-delay: -7s; }
 div:nth-of-type(4) { animation-delay: -6s; }
 div:nth-of-type(5) { animation-delay: -5s; }
 div:nth-of-type(6) { animation-delay: -4s; }
 div:nth-of-type(7) { animation-delay: -3s; }
 div:nth-of-type(8) { animation-delay: -2s; }
 div:nth-of-type(9) { animation-delay: -1s; }
 div:nth-of-type(10) { animation-delay: -0s; }

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"130","seethrough":"","prefixfree":"1","page":"html"}