1

CSS アニメーションとキーフレームを使用して、ページの上部にキューブを表示しようとしています。しかし、彼は最初に登場し、その後アニメーションが行われます. 真上から見えるようにするにはどうすればよいですか？

ページが読み込まれると、2 秒後にキューブが表示されます。

<div id="cube"></div>


cube{
    position: relative;
    left:60px;
    width:100px;
    height:200px;
    background:red;     
    -webkit-animation-name: cube;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 0.8s;  
}
@-webkit-keyframes cube {
    0% {top: -200px;}
    100% {top: 0;}
}

これが私の例です

http://jsfiddle.net/hmmatos/epZJB/

4

1 に答える 1

0

私があなたの質問を誤解していたら申し訳ありませんが、あなたがどのように意味するのかよくわからないので、少なくとも1つがあなたを助けることを期待して2つの異なる例を作りました.

デモ1

ここで行ったことは-webkit-animation-fill-mode: forwards;、アニメーションの最後の状態を維持する追加を追加したことで、設定した位置に div が表示されたままになります。

デモ 2

このデモでopacityは、位置ではなく をアニメーション化しています。

top: -80;そのため、divをdiv 塗りつぶしにスライドさせるtop: 0;だけでフェード インできます。また、この例では-webkit-animation-fill-mode: forwards;.

CSS アニメーションについて読みたい場合は、こちらが良いリソースです。 http://www.w3.org/TR/css3-animations/

お役に立てれば！

于 2013-02-01T07:49:19.933 に答える