3

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

示例 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 图像中的动画停止工作。这是此示例的链接:

示例 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% 的开始和动画之间添加 5s 延迟,所以同样,有没有办法在 25% 的动画和 50% 的动画之间添加 5s 延迟,同样的事情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

0

这里有一个类似的问题:

使用 CSS3 动画更改背景图像

然而,在 Chrome 上,背景图像确实发生了变化,但在 CSS 动画运行时翅膀不会拍打。

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

于 2013-04-30T11:16:05.397 回答