Cacher is the code snippet organizer for pro developers

html,body,section,h1{
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

var clock = (function(){

  var info = document.getElementById('info'),
      css = document.getElementById('css'),
      box = document.getElementById('box');

  
  return  {
    init:function(){

      info.innerHTML = 'Its time of changes';

      var i = 1;

      var time = setInterval(function(){

        i++;

        switch(i){
          case 5:
            info.innerHTML = 'Make box and add color';
            css.innerHTML = 
              'body{background:#f55;color:white;}'+
              '#box h1{text-align:left;color:white;}'+
              '#box{width:80%;padding: 0;display: block;margin: 0 auto;border:0 solid #FFF;box-shadow: 0 0 0 0 #A31212;background: none;color: white;}';
            break;
            
          case 10:
            info.innerHTML = 'Change Header h1';
            css.innerHTML = 
              'body{background:#f55;color:white;}'+
              '#box h1{text-align:center;color:#34495e;}'+
              '#box{width:80%;padding: 0;display: block;margin: 0 auto ;border:0 solid #FFF;box-shadow: 0 0 0 0 #A31212;background: none;color: white;}';
            break;
            
          case 15:
            info.innerHTML = 'Center box and add colors';
            css.innerHTML = 
              'body{background:#f55;color:white;}'+
              '#box h1{text-align:center;color:#34495e;}'+
              '#box{width: 80%;padding: 0px;display: block;margin: 0% auto;border: 3px solid #FFF;background: #ECF0F1;color: #6F6F6F;}';
            break;
            
          case 20:
            info.innerHTML = 'Add shadow and background';
            css.innerHTML = 
              'body{background:url(http://25.media.tumblr.com/8fb80a2a6111ffbf05defc3a758a2f8a/tumblr_n10n4rpjvZ1st5lhmo1_1280.jpg)no-repeat center center fixed; background-size:cover;-moz-background-size:cover;color:white;}'+
              '#box h1{text-align:center;color:#34495e;}'+
              '#box{width: 600px;padding: 10px;display: block;margin: 15% auto;border: 3px solid #FFF;box-shadow: 0 6px 6px -6px #A31212;background: #ECF0F1;color: #6F6F6F;}';
            break;
            
          case 25:
            info.innerHTML = 'Please more beauty';
            css.innerHTML = 
              'body{background:url(http://25.media.tumblr.com/8fb80a2a6111ffbf05defc3a758a2f8a/tumblr_n10n4rpjvZ1st5lhmo1_1280.jpg)no-repeat center center fixed; background-size:cover;-moz-background-size:cover;color:white;}'+
              '#box h1{text-align:center;color:#E45E5E;}'+
              '#box{width: 600px;padding: 10px;display: block;margin: 15% auto;border: 3px solid #000;box-shadow: 0 6px 6px -6px #020202;background: rgba(0, 0, 0, 0.66);color: #DFDFDF;}';
            break;
            
           case 30:
            box.innerHTML = '<h1>Thats it</h1>';
            css.innerHTML = 
              'body{background:url(http://25.media.tumblr.com/8fb80a2a6111ffbf05defc3a758a2f8a/tumblr_n10n4rpjvZ1st5lhmo1_1280.jpg)no-repeat center center fixed; background-size:cover;-moz-background-size:cover;color:white;}'+
              '#box h1{text-align:center;color:#E45E5E;line-height: 62px;}'+
              '#box{width: 100px;height: 100px;padding: -75px;display: block;margin: 15% auto;border: 3px solid #F03A3A;box-shadow: 0 6px 6px -6px #020202;background: rgba(0, 0, 0, 0.37);color: #DFDFDF;border-radius: 100%;overflow: hidden;}';
            break;
            
            
          case 100:
            clearIterval(time);
            break;
        } 
      },1000);
    }
  }
})();

clock.init();

<style id="css"></style>

<section id="box">
  <h1><span id="info"></span></h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, aliquam, cum cupiditate reiciendis animi libero dolorum pariatur cumque illum voluptates recusandae temporibus quaerat ullam rem quas non eveniet numquam nulla?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, qui at repudiandae nemo optio sint quia eum amet iusto blanditiis voluptates deleniti praesentium asperiores. Ipsam, aspernatur ex doloribus enim placeat?</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore magni quasi aut tempora natus dolores molestiae doloribus voluptatibus perferendis quia. Odio, nisi animi ex sequi dolorum explicabo iure culpa nostrum. ipsum dolor sit amet, consectetur adipisicing elit. Itaque, ex, dolorem iusto ab maiores repudiandae facere dolor iure velit sit deserunt officiis alias at ducimus animi vero possimus facilis id. ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, harum, doloribus excepturi hic in illum vero placeat quos reiciendis laborum? Delectus, voluptatem qui necessitatibus nam natus esse officiis quos explicabo. ipsum dolor sit amet, consectetur adipisicing elit. Ea, non debitis itaque esse in vero sit facere tempore! Vitae, odit recusandae est provident harum atque impedit et magnam labore commodi. ipsum dolor sit amet, consectetur adipisicing elit. Esse, sint, voluptas, a unde velit ipsam magni iure nemo maiores temporibus quisquam in rerum blanditiis tenetur ex inventore consequatur placeat nihil.</p>

</section>