無法使用CSS3實現預期的效果

我對CSS3的世界很陌生，我一直在嘗試使用CSS3創建一個飛行的twitter鳥效果，但我無法實現我想要的完整的東西。我想要創建幾個從上到下的左右運動轉換，爲此我創建了3個.gifs，其中的鳥在拍翅膀。以下是我使用CSS3製作的效果，其中我剛剛使用了三張圖像中的一張。無法使用CSS3實現預期的效果

Example 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動畫裏面的所有三個圖像然後我面臨的問題是，動畫，這是我最初加入。使用Photoshop的gif圖像，停止工作。下面是這個例子的鏈接：

Example 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;} 
}

從這個

除此之外，我想知道是否有任何的方式來增加兩個轉變之間的延遲？就像使用animation-delay:5s;一樣，我可以在25％的起始點和動畫之間添加5秒的延遲，同樣，有什麼方法可以在25％的動畫和50％的動畫之間添加5秒的延遲，動畫是50％，動畫是100％？

除此之外，這裏是鏈接到3個圖像，我想在這個動畫中使用它：

Bird Image 1 http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird.gif

Bird Image 2 http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird2.gif

Bird Image 3 http://allwebutilities.com/pnc/wp-content/uploads/2013/04/bird3.gif

來源

2013-04-29 Fahad Hasan