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

Question

有没有办法使用 JavaScript 或 CSS3 来制作汽车驶向用户的动画图像？为了澄清，汽车图像应该从背景开始动画，图像更小，看起来更远，并且随着它“行驶”到图像的前景而逐渐变大？该图像将是汽车的前部，如下所示：

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

Answer 1

您不需要 JavaScript，只需使用 CSS3 动画即可。例如，这可以工作：

@keyframes drive {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.car {
  animation: drive 3s cubic-bezier(0.02, 0.01, 0.21, 1) infinite;
}

<img class="car" src="https://i.stack.imgur.com/oT3DY.png"/>

解释：

首先，我们定义一个drive动画。它从 CSS3 转换开始，将图像缩放到 1/5 大小，然后在动画结束时缩放到完整大小。您可以使用任何 css 属性，但width不会transform: scale强制页面渲染，因此您的动画速度更快。

然后，让我们分解一下.car.

1. drive- 这部分是不言自明的，它告诉CSS使用驱动关键帧
2. 3s- 使动画持续 3 秒
3. cubic-bezier(0.02, 0.01, 0.21, 1)- 设置动画运行的曲线，因此随着时间的推移，它的缩放速度会变慢。
4. infinite导致动画无限重复。