3 
.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 の車と、右から左に移動するいくつかの車を、さまざまな色とすべてのファンシーで作成しようとしています。しかし、それは機能していません。車輪は正常に作動していますが、車が左右に動いていません。なぜだめですか？

4

2 に答える 2

3

position: absolute;あなたはあなたの.cardivに欠けています-それがなければ、.rightすべての要素がデフォルトでposition: static;になっているので意味がありません。

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

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

于 2012-06-14T15:34:36.480 に答える
0

実際には、translate（0,0）を使用して、ものを移動する必要があります（アニメーション化された位置の値よりもパフォーマンスが優れています）

于 2012-06-15T16:08:19.193 に答える