title: animation to start from center of div using css3 only
body: <p>Okay here is the thing,</p>
  
  <p>I have the animation centered in the middle of the page and it start automatically as soon as the page loads but I want the animation to start from the middle of the page, expanding towards the right size. Not from the top left corner!!
  I know it can be done using jquery but I want to use only CSS. </p>
  
  <p>Any thoughts will be greatly appreciated.</p>
  
  <p>Here is what I have 
      <a href="http://jsfiddle.net/robcabrera/9gXNc/" rel="nofollow">http://jsfiddle.net/robcabrera/9gXNc/</a></p>
  
  <pre><code>#container{
  width: 700px;
  height:350px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-175px 0 0 -350px;
   }
  
  #intro{
  width: 700px;
  height:350px;
  box-shadow:15px 15px 15px #333;
  -webkit-box-shadow:15px 15px 15px #333;/*Safari and Chrome*/
  -moz-box-shadow:15px 15px 15px #333;/*Mozilla Firefox*/
  border-top: 2px solid #ccc ;
  border-left: 2px solid #ccc;
  border-radius:10px;
  -moz-border-radius:10px;
  background: #fff;
  animation:welcome 2s;
  animation-timing-function:linear;
  animation-play-state:running;
  -webkit-animation:welcome 2s; /*Safari and Chrome*/
  -webkit-animation-timing-function:linear;
  -webkit-animation-play-state:running;
  }
  
  @keyframes welcome{
  from{ 
  width:0px; 
  height:0px;
  }
  to {
  width: 700px; 
  height:350px;
  }
  }
  
  
  /*Safari and Chrome*/
  @-webkit-keyframes welcome{
  from{ width:0px; height:0px;}
  to {width: 700px; height:350px;}
  }
  </code></pre>