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

Question

.car {
    background: url('cartemplate orange 1.png');
    width: 444px;
    height: 150px;
}
    .carleft {
        -webkit-animation: moveLeft 3s;
        -webkit-animation-delay:2s;
        -webkit-animation-iteration-count: infinite;

        -moz-animation: moveLeft 3s;
        -moz-animation-iteration-count: infinite;

        -ms-animation: moveLeft 3s;
        -ms-animation-iteration-count: infinite;

        -o-animation: moveLeft 3s;
        -o-animation-iteration-count: infinite;

        animation: moveLeft 3s;
        animation-iteration-count: infinite;
    }

    @-webkit-keyframes moveLeft
    {
        0%   { right: -500px; }
        50%  { right: 700px; }
        100% { right: 2000px; }

    }

    @-moz-keyframes moveLeft
    {
        0%   { right: -500px; }
        50%  { right: 700px; }
        100% { right: 2000px; }

    }

    @-ms-keyframes moveLeft
    {
        0%   { right: -500px; }
        50%  { right: 700px; }
        100% { right: 2000px; }

    }

    @keyframes moveLeft
    {
        0%   { right: -500px; }
        50%  { right: 700px; }
        100% { right: 2000px; }

    }

    .carright {
        -webkit-animation: moveRight 3s;
        -webkit-animation-delay:2s;
        -webkit-animation-iteration-count: infinite;

        -moz-animation: moveRight 3s;
        -moz-animation-iteration-count: infinite;

        -ms-animation: moveRight 3s;
        -ms-animation-iteration-count: infinite;

        -o-animation: moveRight 3s;
        -o-animation-iteration-count: infinite;

        animation: moveRight 3s;
        animation-iteration-count: infinite;
    }

    @-webkit-keyframes moveRight
    {
        0%   { left: -500px; }
        50%  { left: 700px; }
        100% { left: 2000px; }

    }

    @-moz-keyframes moveRight
    {
        0%   { left: -500px; }
        50%  { left: 700px; }
        100% { left: 2000px; }

    }

    @-ms-keyframes moveRight
    {
        0%   { left: -500px; }
        50%  { left: 700px; }
        100% { left: 2000px; }

    }

    @keyframes moveRight
    {
        0%   { left: -500px; }
        50%  { left: 700px; }
        100% { left: 2000px; }

    }

    .wheel {
        width: 50px !important;
        height: 50px !important;
        position: relative;
    }

        .wheel1 {    
            width: 100%;
            height: 100%;
            background-color: #3D3D3D;
            border-radius: 50% / 50%;
            position: absolute;    
        }

        .wheel2 {
            width: 70%;
            height: 70%;
            background-color: #B8B8B8;
            margin: 10%;    
            border-radius: 50% / 50%;
            position: absolute;

            -webkit-animation: wheelActive 800ms;
            -webkit-animation-iteration-count: infinite;

            -moz-animation: wheelActive 800ms;
            -moz-animation-iteration-count: infinite;

            -ms-animation: wheelActive 800ms;
            -ms-animation-iteration-count: infinite;

            -o-animation: wheelActive 800ms;
            -o-animation-iteration-count: infinite;

            animation: wheelActive 800ms;
            animation-iteration-count: infinite;
        }

        @-webkit-keyframes wheelActive
        {
            0%   { margin: 15%; height: 70%; width: 70%; }
            50%  { margin: 5%; height: 90%; width: 90%; }
            100% { margin: 15%; height: 70%; width: 70%; }

        }

        @-moz-keyframes wheelActive
        {
            0%   { margin: 15%; height: 70%; width: 70%; }
            50%  { margin: 5%; height: 90%; width: 90%; }
            100% { margin: 15%; height: 70%; width: 70%; }

        }

        @-ms-keyframes wheelActive
        {
            0%   { margin: 15%; height: 70%; width: 70%; }
            50%  { margin: 5%; height: 90%; width: 90%; }
            100% { margin: 15%; height: 70%; width: 70%; }

        }

        @keyframes wheelActive
        {
            0%   { margin: 15%; height: 70%; width: 70%; }
            50%  { margin: 5%; height: 90%; width: 90%; }
            100% { margin: 15%; height: 70%; width: 70%; }

        }

    .wheelleft, .wheelright {
        position: absolute;
    }

    .carleft .wheelleft {
        top: 135px;
        left: 53px;
    }

    .carleft .wheelright {
        top: 135px;
        left: 348px;
    }

    .carright .wheelleft {
        top: 135px;
        left: 64px;
    }

    .carright .wheelright {
        top: 135px;
        left: 358px;
    }

<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>

jsFiddle：http: //jsfiddle.net/c6kBj/

我正在尝试用 CSS3 制作一辆从左到右行驶的汽车，以及一些从右到左行驶的汽车，颜色不同，一切都花哨。但它不起作用。车轮工作正常，但汽车没有从左向右移动。为什么不？

Answer 1

您缺少div - 没有它，position: absolute;因为所有元素都默认为;.car.rightposition: static

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

http://jsfiddle.net/c6kBj/1/

Answer 2

您实际上应该使用 translate(0,0) 来移动东西（比动画位置值表现更好）