css - 仅使用 css3 从 div 中心开始的动画

Question

好的，这就是问题，

我让动画在页面中间居中，它会在页面加载后立即自动启动，但我希望动画从页面中间开始，向正确的尺寸扩展。不是左上角!!我知道可以使用 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-left 和 margin-top，这样介绍会随着它的增长而向左/向上移动
• 添加了动画填充模式:前进以在动画完成时将介绍保持在原位。

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 welcome {
    from {
        width:0px;
        margin-left: 0;
        margin-top: 0;
        height:0px;
    }
    to {
        width: 700px;
        margin-left: -350px;
        margin-top: -175px;
        height:350px;
    }
}