Tab player

by AaronLayton

HTML

<div class="tabsContainer">
   <pre>
|-------------------|-------------------------|--------------------|---------||
|-------------------|-------------------------|--------------------|---------||
|-------------------|-------------------------|--------------------|---------||
|------10-(10)------|-----0-10-(10)-8-(8)-7---|------10-(10)---10--|-(10)----||
|----8---------8----|-----------------------8-|----7---------7-10--|-(10)----||
|-8--------------0--|-(0)---------------------|-7--------------10--|-(10)----||
    </pre>
</div>

CSS

.tabsContainer{
    font-size:30px;
    margin:0 auto;
    position:relative;
    width:215px;
}
.tabsContainer pre {
    position:relative;
    top:0;
    
      -webkit-transform: rotate(-90deg);  
     -moz-transform: rotate(-90deg);  
      -ms-transform: rotate(-90deg);  
       -o-transform: rotate(-90deg); 
          transform: rotate(-90deg);
    
   -webkit-animation: myanim 20s linear infinite; /* Chrome, Safari 5 */
     -moz-animation: myanim 20s linear infinite; /* Firefox 5-15 */
       -o-animation: myanim 20s linear infinite; /* Opera 12+ */
          animation: myanim 20s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
    
    .tabsContainer:after {
        border-bottom:1px solid #f00;
        content:"";
        display:block;
     position:absolute;
    bottom:10px;
    width:100%;
    left:-16px;
    }

@-webkit-keyframes myanim {
  0%   { top: 0px; }
  100% { top: 1460px; }
}
@-moz-keyframes myanim {
  0%   { top: 0px; }
  100% { top: 1460px; }
}
@-o-keyframes myanim {
  0%   { top: 0px; }
  100% { top: 1460px; }
}
@keyframes myanim {
  0%   { top: 0px; }
  100% { top: 1460px; }
}