Trying to make a div move using CSS3 animations, not working

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/

I'm trying to make a car in CSS3 that goes from left to right and also some cars that go from right to left, with different colors and everything fancy. But it isn't working. The wheels are working correctly, but the car is not moving from left to right. Why not?

Answer 1

You should actually be using translate(0,0) to move stuff around (performs better than animated position values)

Answer 2

you are missing position: absolute; on your .car div - without that, .right is meaningless as all elements default to position: static;

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

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