0

以下の要件のcss3アニメーションが必要です。誰かが彼/彼女の経験を共有してくれれば素晴らしいと思います

私は3つの画像を持っています

image1.jpg : これは下から上にアニメーション化されます (image2.jpg と image3.jpg は非表示にする必要があります)。

image2.jpg : これは、image1.jpg が読み込まれるとステージに表示されます (image3.jpg は非表示にする必要があります)。

image3.jpg : image2.jpg の後に表示される最後の画像です。

ありがとうございます

4

2 に答える 2

1

このようなもの？http://jsfiddle.net/2hSqz/3/

アニメーションの例を次に示します。

 div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; }

@keyframes myfirst { from {background: red;} to {background: yellow;} }

そして、のようにすべてのブラウザ用に最適化することは素晴らしいことです

于 2013-01-08T07:33:51.200 に答える
1

私はあなたが何を望んでいるのか理解できませんが、おそらくあなたがこのように望んでいるのを助けようとしています.

<style>
            @keyframes move
            {
                from{top:100%}
                to{top:0}
            }
            @keyframes visible
            {
                from{opacity:0}
                to{opacity:1}
            }
            #img1{animation:move 5s; position:relative;}
            #img2{animation:visible both 3s; animation-delay:5s; opacity:0;}
            #img3{animation:visible both 3s; animation-delay:8s; opacity:0;}

        </style>

それがあなたが望むものであることを願っています!

于 2013-01-08T08:03:59.253 に答える