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，现在容器位于其左上角的中心
为动画添加了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;
    }
}

动画只能使用css3从div的中心开始

1 个答案: