Create a seven-color rainbow with animation Goal

Use any graphics library or environment that can use colours and animation to create a rainbow.

Rules


The rings should emerge one by one in some kind of animation or succession
The rainbow must have at least 7 colours.


Winning Criteria

Fewest bytes wins.
HTML + CSS + JavaScript (447 440 439 432 428 434 390 388 383 bytes)

(Byte size went up at one point in order to fulfill “appear one by one” requirement)

(Some credit to Fez Vrasta’s answer for reminding me of the existence of document.write)

&lt;script&gt;for(d=document,i=0;k=i&gt;&gt;1,k&lt;7;setTimeout(function(w){d.getElementById(w).id="x"+w},555*k,i++))d.write("&lt;b id="+i+"&gt;&lt;style&gt;b{width:0;height:0;transition:width 2s,height 2s;border-radius:50ex 50ex 0 0;position:fixed;bottom:-4ex}#x"+i+"{left:"+(9+4*k)+"ex;width:"+(80-6*k)+"ex;height:"+(40-3*k)+"ex;box-shadow:"+(i%2&amp;&amp;"inset 0")+" 0 6ex hsl("+50*k+",99%,50%)}&lt;/style&gt;")&lt;/script&gt;


Screenshot (see JSFiddle for the full animation)



Explanation

The rainbow is created by having 7 pairs of &lt;b&gt; elements, which are all positioned using position:absolute and a width, height, left and bottom. Within each pair, they have the same position and size, but one has an “outer” (standard) box-shadow, the other an inset one, thus creating the nice fuzzy bands. The colors are calculated using hsl(), allowing us to vary only the hue but having the same saturation (99%) and lightness (50%) for all. The &lt;b&gt; tags are nested inside each other, but this doesn’t matter because all of their positioning is relative to the page.

In the beginning, they all have IDs 0, 1, etc., and a styling rule that applies to all b elements sets their width and height to 0, making them invisible. The code also outputs styling rules for elements with ID x0, x1, etc., which initially do not apply.

A setTimeout is then used to successively change their IDs from 0 to x0, from 1 to x1 and so on. This triggers a CSS transition which causes them to appear one by one.

&lt;script&gt;
    for (d = document, i = 0;      // i loops from 0 to 14
         k = i &gt;&gt; 1, k &lt; 7;        // k loops from 0 to 7
         setTimeout(
             function(w) {
                 // Code to change the element IDs, triggering the CSS transition
                 d.getElementById(w).id = "x" + w
             },
             555 * k,     // 555 milliseconds delay between the appearance of each band
             i++          // This argument is passed into the timeout function
         )
    )
        // For-loop body; creates a &lt;b&gt; element and a &lt;style&gt; element
        d.write(
            // The &lt;b&gt; element (with its initial ID)
            "&lt;b id=" + i + "&gt;" +
            "&lt;style&gt;" +
                // CSS rules that apply to all elements (esp. transition!)
                "b{width:0;height:0;transition:width 2s,height 2s;" +
                "border-radius:50ex 50ex 0 0;position:fixed;bottom:-4ex}" +
                // CSS rules for this specific element
                "#x" + i + "{" +
                    "left:" + (9+4*k) + "ex;" +
                    "width:" + (80-6*k) + "ex;" +
                    "height:" + (40-3*k) + "ex;" +
                    // “i%2” is either 0 or 1; therefore,
                    // “i%2 &amp;&amp; "inset 0"” is either 0 or "inset 0"
                    "box-shadow:" + (i%2 &amp;&amp; "inset 0") + " 0 6ex " +
                        // 99% is shorter than 100% ;-)
                        "hsl(" + 50*k + ",99%,50%)" +
                "}" +
            "&lt;/style&gt;"
        )
&lt;/script&gt;