Javascript 需要x轴上的动画，也需要css3动画

我做了一个简单的程序，波尔在y轴上反弹，但我不知道如何使它也在x轴上移动。如果我将x轴变换的值从0更改为正值或负值，则会显示boll Diss。求求你，救命

反弹
*{边距：0自动；}
div
{
宽度：200px；
高度：200px；
背景色：#FFDEAD；
边界半径：100%；
边框：5px纯黑；
利润上限：-250px；
动画：直线向前弹跳2秒；
}
p{
文本对齐：居中；
利润率最高：46%；
}
@关键帧反弹
{
0%{transform:translate（0，-250px）；}
20%{transform:translate（0450px）；}
40%{transform:translate（0330px）；}
50%{transform:translate（0450px）；}
65%{transform:translate（0370px）；}
75%{transform:translate（0450px）；}
90%{transform:translate（0400px）；}
100%{transform:translate（0450px）；}
}
这是一个div

使用translate（tx）或translate（tx，ty）

*{
保证金：0自动；
}
div
{
宽度：200px；
高度：200px；
背景色：#FFDEAD；
边界半径：100%；
边框：5px纯黑；
利润上限：-250px；
动画：直线向前弹跳2秒；
}
p{
文本对齐：居中；
利润率最高：46%；
}
@关键帧反弹
{
0%{transform:translate（0px，-250px）；}
20%{transform:translate（50px，450px）；}
40%{transform:translate（100px，330px）；}
50%{transform:translate（150px，450px）；}
65%{transform:translate（200px，370px）；}
75%{transform:translate（250px，450px）；}
90%{transform:translate（300px，400px）；}
100%{transform:translate（350px，450px）；}
}

---

这是一个div

您可以使用它，显然您应该知道关键帧属性的参数。你可以通过这条线

*{
保证金：0自动；
}
div
{
宽度：200px；
高度：200px；
背景色：#FFDEAD；
边界半径：100%；
边框：5px纯黑；
利润上限：-250px；
动画：直线向前弹跳2秒；
}
p{
文本对齐：居中；
利润率最高：46%；
}
@关键帧反弹
{
0%{transform:translate（0px，-250px）；}
20%{transform:translate（50px，450px）；}
40%{transform:translate（100px，330px）；}
65%{transform:translate（200px，330px）；}
78%{transform:translate（-150px，330px）；}
90%{transform:translate（200px，330px）；}
100%{transform:translate（-20px，330px）；}
}

---

这是一个div

@如果答案有帮助，请向上投票/接受