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

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

Answers


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/


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


Need Your Help

How to improve runtime performance of reading file program

python file io

I'm currently trying to read 150 million lines (from a data file with bio-sequencing information) using Python. Currently, it's reading at 20,000 lines per second which would take about an hour and a

Android, SQLite connections and transactions

android multithreading sqlite

I'm currently grokking the SQLiteDatabase and related classes with the purpose of getting a better understanding of how it handles concurrency (my current solution works, but I got the impression I...