CodePen

HTML

            
              <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<a href="" class="thebg">this is a link</a>
<section class="progress window">
 <h1>Copying "All your torrents are belong to us"</h1>
 <details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>Transfer rate:</dt> <dd>452KB/s</dd>
   <dt>Local filename:</dt> <dd>/home/user.m4v</dd>
   <dt>Remote filename:</dt> <dd>/var/www/other1.m4v</dd>
   <dt>Duration:</dt> <dd>01:16:27</dd>
   <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
 </details>
</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .progress {
     padding: 10px;   
}
h1 {
    padding-bottom: 10px;        
}
/*
details > summary:hover { 
  background: yellow;
  -webkit-border-radius: 5px;
}
*/
details > summary { 
    color:#000; 
    background:#f00; 
    width: 600px;
    padding:5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
  
   -webkit-animation-name: defaultcolor;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;   
}

details[open] > summary { 
    color: #f00; 
    background:#000;
    padding:5px;
  
   -webkit-animation-name: colorchange;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;

}

a.thebg{
    color:#000; 
    background:#f00; 
    margin:10px;
    padding:5px; 
    
    -webkit-border-radius: 5px; 
    -webkit-transition-property: color, background; 
    -webkit-transition-duration: 1s, 1s; 
    -webkit-transition-timing-function: linear, ease-in;
     
    border-radius: 5px;
    transition-property:color, background; 
    transition-duration: 1s, 1s; 
    transition-timing-function: linear, ease-in;  
} 
a.thebg:hover{
    color:#f00;
    background:#000;
}


@-webkit-keyframes colorchange {
	from {    
    color:#000; 
    background:#f00;  
  }
  to { 
    color:#f00;
    background:#000;
  }
}

keyframes colorchange {
	from {    
    color:#000; 
    background:#f00;  
  }
  to { 
    color:#f00;
    background:#000;
  }
}

@-webkit-keyframes defaultcolor {
	from {    
    color:#f00; 
    background:#000;  
  }
  to { 
    color:#000;
    background:#f00;
  }
}

keyframes defaultcolor {
	from {    
    color:#f00; 
    background:#000;  
  }
  to { 
    color:#000;
    background:#f00;
  }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................