animation to start from center of div using css3 only - css

Question

Okay here is the thing,
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.
Any thoughts will be greatly appreciated.
Here is what I have
http://jsfiddle.net/robcabrera/9gXNc/
#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;}
}

Answer 1

Without changing your code too much:
removed #container - margin, now the container is centered in its top left corner
added margin-left, margin-top to the animation so the intro would animate left/up as it grew
added animation fill-mode: forwards to keep the intro in place when the animation was complete.
Demo Fiddle
CSS
#container {
width: 700px;
height:350px;
position:absolute;
left:50%;
top:50%;
/*margin:-175px 0 0 -350px;*/
}
#intro {
position: relative;
...
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*Safari and Chrome*/
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
}
Keyframes (only generic shown here)
#keyframes welcome {
from {
width:0px;
margin-left: 0;
margin-top: 0;
height:0px;
}
to {
width: 700px;
margin-left: -350px;
margin-top: -175px;
height:350px;
}
}