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

Question

有没有办法使用 JavaScript 或 CSS3 为汽车驶向用户的图像制作动画？澄清一下，汽车图像应该从背景开始动画，图像更小，看起来更远，然后随着它 "drives" 前进到图像的前景而逐渐变大？图像将是汽车的前部，看起来像这样：

此 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上的动画属性。

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

Answer 2

这应该让你开始：

img {
      -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
      animation:mymove 3s infinite;
      position: relative;
   }

   @keyframes mymove
   {
     0% {width:10%;}
     10% {width:20%;}
     20% {width:30%;}
     30% {width:40%;}   
     40% {width:50%;}
     50% {width:60%;}
     60% {width:70%;}
     70% {width:80%;} 
     80% {width:90%;}
     90% {width:100%;}
     100% {width:100%;}     
   }

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

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

Car driving forward animation using JavaScript/CSS3 for banner advertisement

html

javascript

css

ads

banner

解释：