Question

我是CSS3世界的新手，我一直在尝试使用CSS3创建一个飞行的推特鸟效果，但我无法实现我想要的完整的东西。我想创建一些自上而下 - 左右运动过渡，我已经创建了3个.gifs，其中鸟正在拍打它的翅膀。这是我使用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;一样，我能够在开始和动画之间添加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

Answer 1

这里有一个类似的问题：

Changing Background Image with CSS3 Animations

然而，在Chrome上，背景图像会发生变化，但在CSS动画运行时，机翼不会拍打。

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

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

1 个答案: