使用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会使动画无限重复。

Answer 2

这应该让你开始：

＆＃13;

＆＃13;

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%;}     
   }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;