Javascript 如何使用css和js缓慢移动蓝色的推特鸟？

如何让小鸟从树上飞回来？它向前走，我希望它转回来…怎么做

$（文档）.ready（函数（）{
$（“.bird”）。单击（函数（）{
$（此）.addClass（“鸟巢”）；
})
});
.bird img{
宽度：100px；
高度：自动；
}
伯德先生{
位置：绝对位置；
左：200px；
顶部：100px；
z指数：10；
转变：转变5s；
过渡时间功能：轻松；
}
伯德莫夫先生{
转换：translateX（800px）；
动画：振荡5s；
动画计时功能：轻松；
}
@关键帧振荡{
10%{top:50px；}
30%{顶部：150px；}
60%{top:100px；}
80%{top:120px；}
100%{top:100px；}
}

预紧器
您可以在
.bird
选择器中添加一个选项，指定鸟应该如何飞行。要确保动画平滑，请确保使用“硬件加速”属性，如下所示：

@keyframes hover {
  0% {
    transform: translate3d(0, -15px, 0);
  }

  100% {
    transform: translate3d(0, +15px, 0);
  }
}

.bird {
  animation: hover 2s ease-in-out infinite reverse;
}

这将使鸟垂直悬停。
请看以下示例：


div{
宽度：100px；
高度：100px；
背景颜色：浅蓝色；
边框：1px纯黑；
-webkit转换：所有750ms易用输入输出；
-moz转换：所有750ms的缓进缓出；
-ms转换：所有750ms均易于输入输出；
-o型过渡：所有750ms缓进缓出；
过渡：所有750ms缓进缓出；
}
div:悬停{
-moz变换：translateX（200px）translateY（40px）；
-webkit转换：translateX（200px）translateY（40px）；
-o变换：translateX（200px）translateY（40px）；
-ms变换：translateX（200px）translateY（40px）；
转换：translateX（200px）translateY（40px）；
}
如果您不想让它变得非常复杂，您可以仅使用CSS3动画和转换以及小jQuery来添加类并开始翻译

我用了两个动作让鸟飞：一个在X方向，另一个在Y方向。两个图像都是绝对定位的

这是完整的代码。您可以相应地更改它：


$（文档）.ready（函数（）{
$（“.bird”）。单击（函数（）{
$（此）.addClass（“鸟巢”）；
})
});
.bird img{
宽度：100px；
高度：自动；
}
.静态鸟img{
宽度：300px；
高度：自动；
}
伯德先生{
位置：绝对位置；
左：200px；
顶部：100px；
z指数：10；
转变：转变5s；
过渡时间功能：轻松；
}
.静电鸟{
位置：绝对位置；
右：200px；
顶部：100px；
z指数：5；
}
伯德莫夫先生{
转换：translateX（800px）；
动画：振荡5s；
动画计时功能：轻松；
}
@关键帧振荡{
10%{top:50px；}
30%{顶部：150px；}
60%{top:100px；}
80%{top:120px；}
100%{top:100px；}
}

如果我想让小鸟一进入HTML页面就飞起来，您可以使用CSS3和JS如何修改代码？当我点击这只鸟的时候就不会了。你需要JavaScript来实现这一点。你不能在没有任何事件的情况下使用转换。好的，非常感谢：）我有一个疑问，现在它向前飞，如果我想让它改变方向并返回到起始位置，我应该怎么做？正如我所写的，如果你想使动画复杂化，请使用JavaScript。您可以使用
setInterval
和
setTimeout
方法来控制动画。使用JavaScript动画。