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 に答える