Html 尝试使用CSS3动画进行div移动，但不起作用

jsFiddle:

---

我想用CSS3做一辆从左到右的车，还有一些从右到左的车，有不同的颜色和各种各样的花哨。但它不起作用。车轮运转正常，但汽车没有从左向右移动。为什么不呢？

您缺少

位置：绝对.car

div上的code>-如果没有它，

.right

就没有意义，因为所有元素都默认为

位置：static

<div class="car carleft">
    <div class="wheel wheelleft">
        <div class="wheel1"></div>
        <div class="wheel2"></div>
    </div>

    <div class="wheel wheelright">
        <div class="wheel1"></div>
        <div class="wheel2"></div>
    </div>
</div>

---

实际上，您应该使用translate（0,0）来移动对象（性能优于动画位置值）

是的，但要小心。我正在使用它，当动画开始时，它会导致字体图标跳转。而使用left，top则没有。（铬）。

<div class="car carleft">
    <div class="wheel wheelleft">
        <div class="wheel1"></div>
        <div class="wheel2"></div>
    </div>

    <div class="wheel wheelright">
        <div class="wheel1"></div>
        <div class="wheel2"></div>
    </div>
</div>

.car {
    background: url('cartemplate orange 1.png');
    width: 444px;
    height: 150px;
    position: absolute;
}