Isotoper w/too many CSS rules (unmaintainable but works)

by sanford

HTML

<div id="capsulecn" class="capsules">
    <div class="anchor" ></div>
<div id="id1" class="capsule show" style="background:maroon;">1</div>
<div id="id2" class="capsule show" style="background:gold;">2</div>
<div id="id3" class="capsule show">3</div>
<div id="id4" class="capsule show">4</div>
<div id="id5" class="capsule show" style="background:red;">5</div>
<div id="id6" class="capsule show">6</div>
<div id="id7" class="capsule show" style="background:green;">7</div>
<div id="id8" class="capsule show">8</div>
<div id="id9" class="capsule show">9</div>
<div id="id10" class="capsule show">10</div>
<div id="id11" class="capsule show">11</div>
<div id="id12" class="capsule show">12</div>
</div>

CSS

* {font-family:Arial;}
.capsules {
    min-width: 220px;
    max-width: 220px;
    position: relative;
}
.capsule {
    width:50px;
    height:50px;
    top: 0;
    left: 0;
    opacity: 1;
    position:absolute;
    display:block;
    -webkit-transition: all 800ms;
}
.anchor~.show
,.anchor~.show~.show
,.anchor~.show~.show~.show
,.anchor~.show~.show~.show~.show
{ top: 0px; }
.anchor~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show
{ top: 50px; }
.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
{ top: 100px; }
.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
{ top: 150px; }
.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
,.anchor~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show~.show
{ top: 200px;...

JavaScript

(function(){
    $('capsulecn').addClass('firehover');
}).delay(600);
(function(){
    $('id3').toggleClass('show').toggleClass('hide');
$('id9').toggleClass('show').toggleClass('hide');
    $('capsulecn').setStyle('color','black'); /* force ie refresh */
  
}).delay(2400);
(function(){
});