1

好的，事情就是这样，

我将动画置于页面中间，并在页面加载后立即自动启动，但我希望动画从页面中间开始，向正确的大小扩展。不是从左上角！！我知道可以使用 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;}
}
4

1 回答 1

2

无需过多更改代码：

  • 移除 #container - 边距，现在容器位于其左上角的中心
  • 为动画添加了 margin-left 和 margin-top ，所以介绍会随着它的增长而向左/向上动画
  • 添加动画填充模式：在动画完成时向前保持介绍。

演示小提琴

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;
    }
}
于 2013-08-18T20:38:53.230 回答