无法使用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