使用JavaScript/CSS3进行横幅广告的汽车向前行驶动画

有没有一种方法可以使用JavaScript或CSS3来设置汽车向用户行驶时的图像动画？为了澄清这一点，汽车图像应该从背景开始设置动画，图像越小，看起来越远，随着它“驱动”到图像的前景，图像会逐渐变大？图像将是汽车前部的图像，如下所示：

---

这个JavaScript动画将在HTML5横幅广告中使用，因此我希望避免任何会大幅增加我的可交付内容大小的事情。我一直在网上寻找类似的东西，但似乎找不到一个我希望实现的例子。欢迎任何想法。

您不需要javascript，只需使用CSS3动画即可。例如，这将起作用：

@关键帧驱动{
从{
变换：比例（0.2）；
}
到{
变换：比例（1）；
}
}
.汽车{
动画：驱动3s立方贝塞尔（0.02,0.01,0.21,1）无穷大；
}

---

您不需要javascript，只需使用CSS3动画即可。例如，这将起作用：

@关键帧驱动{
从{
变换：比例（0.2）；
}
到{
变换：比例（1）；
}
}
.汽车{
动画：驱动3s立方贝塞尔（0.02,0.01,0.21,1）无穷大；
}

---

这应该让您开始：

img{
-webkit动画：mymove 5s无限；/*Safari和Chrome*/
动画：mymove 3s无限；
位置：相对位置；
}
@关键帧mymove
{
0%{宽度：10%；}
10%{宽度：20%；}
20%{宽度：30%；}
30%{宽度：40%；}
40%{宽度：50%；}
50%{宽度：60%；}
60%{宽度：70%；}
70%{宽度：80%；}
80%{宽度：90%；}
90%{宽度：100%；}
100%{宽度：100%；}
}

---

这应该让您开始：

img{
-webkit动画：mymove 5s无限；/*Safari和Chrome*/
动画：mymove 3s无限；
位置：相对位置；
}
@关键帧mymove
{
0%{宽度：10%；}
10%{宽度：20%；}
20%{宽度：30%；}
30%{宽度：40%；}
40%{宽度：50%；}
50%{宽度：60%；}
60%{宽度：70%；}
70%{宽度：80%；}
80%{宽度：90%；}
90%{宽度：100%；}
100%{宽度：100%；}
}

---

这当然可以在JavaScript中完成，但在CSS中要简单得多。@ScottMarcus我刚刚编辑了OP，以包含CSS3动画！我就想到了。您是否有CSS3动画的示例可以使用？谢谢。这当然可以用JavaScript来完成，但用CSS会简单得多。@ScottMarcus我刚刚编辑了OP以包含CSS3动画！我就想到了。您是否有CSS3动画的示例可以使用？谢谢，太好了。我会接受这个答案，一旦它让我。谢谢你。@LizBanach谢谢！杰出的我会接受这个答案，一旦它让我。谢谢你。@LizBanach谢谢！