анимации начинать с центра DIV с помощью CSS3 только

Question

Okay здесь вещи,

Я анимация с центром в середине страницы и запускается автоматически, как только страница загрузится, но я хочу анимацию начинайте с середины страницы, расширяясь до нужного размера. Не из левого верхнего угла! Я знаю, что это можно сделать с помощью jquery, но я хочу использовать только CSS.

Любые мысли будут очень благодарны.

Вот что у меня есть 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

без изменения кода слишком много:

• удалены #container - запас, теперь контейнер с центром в верхнем левом углу
• добавлена ​​маржа-левая, margin-top для анимации, так что интро будет оживлять влево/вверх по мере роста
• добавлено ani mation fill-mode: вперед, чтобы сохранить ввод, когда анимация завершена.

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 (только родовое показано здесь)

@keyframes welcome { 
    from { 
     width:0px; 
     margin-left: 0; 
     margin-top: 0; 
     height:0px; 
    } 
    to { 
     width: 700px; 
     margin-left: -350px; 
     margin-top: -175px; 
     height:350px; 
    } 
}