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

【问题标题】：Trying to make a div move using CSS3 animations, not working尝试使用 CSS3 动画进行 div 移动，但不起作用
【发布时间】：2012-06-16 00:08:19
【问题描述】：

.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 制作一辆从左到右行驶的汽车，以及一些从右到左行驶的汽车，具有不同的颜色和所有花哨的东西。但它不起作用。车轮工作正常，但汽车没有从左向右移动。为什么不呢？

【问题讨论】：

标签： html animation css

【解决方案1】：

你的.car div 上缺少position: absolute; - 没有它，.right 毫无意义，因为所有元素都默认为position: static；

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

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