1

200 x 200 の画像があります。画像に 2 つの効果を持たせたいと考えています<div>。の左下に浮かびます。<div>

これが私のコードです：

#ad-1 #alunaimg{
width: 200px;
height: 200px;
margin: 20px 60px;
position: absolute;
-webkit-animation: imgmove 3s linear 0s 1;
-webkit-animation: imgresize 2s linear 0s 1;
}

@-webkit-keyframes imgmove{
0%   {left: -200px; top: 0px;}
100% {left: 0px; top: 0px;}
}

@-webkit-keyframes imgresize{
0%  {left: 0px; top: 0px;}
100% {width: 50%; height: 50%; top: 130px; left: 40px;}

}

最初の効果は完全に機能しますが、2 番目の効果は機能しません。

ここに私のコードがありますhttp://jsfiddle.net/DreamBig/pgQhJ

誰か助けていただければ幸いです。どうもありがとう！

4

2 に答える 2

0

あなたのHTMLはこれです：

<div id="ad-1">
    <div id="alunaimg">
        <img></img>
    </div>
</div>

alunaimg の寸法を変更していますが、内側の img の寸法は変更していません。

追加

#alunaimg img {
    width: 100%;
    height: 100%; 
}

img をコンテナ div のサイズに適応させるには

于 2013-07-12T17:51:49.810 に答える
0

それが常にシーケンスになる場合は、すべてを 1 つのアニメーションに入れることを検討することをお勧めします。それ以外の場合は、javascript を使用して新しいクラスを割り当てて、2 番目のアニメーションをトリガーする必要があります。

@-webkit-keyframes imgmove{
    0%   {left: -200px; top: 0px;}
    50% {left: 0px; top: 0px;}
    100% {width: 50%; height: 50%; top: 130px; left: 40px;}
}

これは完全にテストされていませんが、そのような複数のアニメーションを追加することはできません. 別々に保管する場合は、次のことを試してください。

-webkit-animation: imgmove 3s linear 0s 1, imgresize 2s linear 3s 1;

3s最初のアニメーションの直後に発生する 2 番目のアニメーションの遅延に注意してください。

余談ですが、leftandの代わりに css 変換を使用することを検討してtopください。http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/を参照してください。

これは近いですか: http://jsfiddle.net/pgQhJ/2/

#ad-1 #alunaimg{
    width: 200px;
    height: 200px;
    margin: 20px 60px;
    position: absolute;
    -webkit-animation: imgmove 3s linear 0s;
    top: 20px; left: -40px; width: 50%; height: 50%;
}
#ad-1 #alunaimg img {
    max-width: 100%;
}

@-webkit-keyframes imgmove{
    0%   {left: -200px; top: 0px; width: 100%; height: 100%;}
    50% {left: 0px; top: 0px; width: 100%; height: 100%;}
    100% {top: 20px; left: -40px; width: 50%; height: 50%; }
}

#alunaimgdiv をアニメーションの 100% と同じになるように設定して、最後に元の場所に留まるようにしました。これは、アニメーションの他のキーフレームにwidthおよびを追加することも意味していました。height

于 2013-07-11T03:34:43.927 に答える