Html 使用CSS3无法达到预期效果

我是CSS3的新手，我一直在尝试使用CSS3创建一个飞行的twitter小鸟效果，但我无法实现我想要的完整的东西。我想创建一些自上而下的左-右运动过渡，我已经为它们创建了3.gif，在其中，鸟在拍动翅膀。这是我使用CSS3创建的效果，我刚刚使用了三幅图像中的一幅

现在，当我尝试使用CSS3动画中的所有三个图像时，我面临的问题是，我最初使用Photoshop添加到.gif图像中的动画停止工作。以下是此示例的链接：

除此之外，我想知道是否有任何方法可以在两个转换之间增加延迟？喜欢使用

动画延时：5s，我能够在25%的开始和动画之间添加5s延迟，因此，类似地，是否有任何方法可以在25%的动画和50%的动画之间添加5s延迟，以及在50%的动画和100%的动画之间添加5s延迟

除此之外，以下是我想在动画中使用的3幅图像的链接：



这里有一个类似的问题：


但是，在Chrome上，背景图像会发生变化，但在CSS动画运行时翅膀不会拍打

您可以尝试使用精灵组合图像，然后更改背景位置

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

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