3

私はCSS3の世界に不慣れで、CSS3を使用して飛んでいるさえずりの鳥の効果を作成しようとしていますが、私が望む完全なものを達成することはできません. 鳥が羽ばたきしている 3 つの .gif を作成した上から下、左、右のモーション トランジションをいくつか作成したいと考えています。これは、CSS3 を使用して作成した効果で、3 つの画像のうちの 1 つを使用しています。

例 1

<a target="_blank" href="javascript:void(0)" id="bird"></a>

#bird {
     background-image: url(http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird.gif);
     width: 64px;
     height: 62px;
     top: 0px;
     left: 0px;
     position: absolute;
}

#bird
{
     animation:myfirst 10s;
     -webkit-animation:myfirst 10s; /* Safari and Chrome */
     animation-delay:5s;
     -webkit-animation-delay:5s; /* Safari and Chrome */
}

@keyframes myfirst
{
     0%   {left:0px; top:0px;}
     25% {left:302px; top:95px;}
     50% {left:-5px; top:214px;}
     100% {left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
     0%   {left:0px; top:0px;}
     25% {left:302px; top:95px;}
     50% {left:-5px; top:214px;}
     100% {left:0px; top:0px;}
}

CSS3 アニメーション内で 3 つの画像すべてを使用しようとすると、最初に Photoshop を使用して .gif 画像に追加したアニメーションが機能しなくなるという問題に直面しています。この例のリンクは次のとおりです。

例 2 

<a target="_blank" href="javascript:void(0)" id="bird"></a>

#bird {
     background-image: url(http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird.gif);
     width: 64px;
     height: 62px;
     top: 0px;
     left: 0px;
     position: absolute;
}

#bird
{
     animation:myfirst 10s;
     -webkit-animation:myfirst 10s; /* Safari and Chrome */
     animation-delay:5s;
     -webkit-animation-delay:5s; /* Safari and Chrome */
}

@keyframes myfirst
{
     0%   {left:0px; top:0px;}
     25% {width: 76px; height: 55px; background-image: url(http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird2.gif); left:302px; top:95px;}
     50% {width: 76px; height: 55px; background-image: url(http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird3.gif); left:-5px; top:214px;}
     100% {left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
     0%   {left:0px; top:0px;}
     25% {width: 76px; height: 55px; background-image: url(http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird2.gif); left:302px; top:95px;}
     50% {width: 76px; height: 55px; background-image: url(http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird3.gif); left:-5px; top:214px;}
     100% {left:0px; top:0px;}
}

これとは別に、2 つの遷移の間に遅延を追加する方法があるかどうか疑問に思っていましたか? を使用animation-delay:5s;するように、開始と 25% のアニメーションの間に 5 秒の遅延を追加できたので、同様に、25% のアニメーションと 50% のアニメーションの間に 5 秒の遅延を追加する方法はありますか? 50% のアニメーションと 100% のアニメーション?

これ以外に、このアニメーションで使用したい 3 つの画像へのリンクを次に示します。

鳥の画像 1 http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird.gif

鳥の画像 2 http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird2.gif

鳥の画像 3 http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird3.gif

4

1 に答える 1