javascript - 使用 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="/image/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 使动画无限重复。