CSS 车辆动画答案

【问题标题】：CSS vehicle animationCSS 车辆动画
【发布时间】：2014-11-23 05:35:19
【问题描述】：

我正在尝试为在屏幕上移动的拖拉机设置动画。我已经让它在我的屏幕上完美运行，但是我希望它能够在不同的平台上运行（仅包括 -webkit-）。当我重新调整尺寸时，拖拉机是流动的，但轮子不是。我怎样才能让它们一起调整？

<body>
<div class="container">
    <div class="tractor">
        <img src="img/tractor-700px.png" alt="tractor">
    </div>
    <div class="wheels">
        <div class="b_wheel">
            <img src="img/b_wheel.png">
        </div>
        <div class="f_wheel">
            <img src="img/f_wheel.png">
        </div>
    </div>
</div>

这是我的主要 CSS：

.tractor {
   width: 380px;
   position: absolute;
   top: 40%;
   left: -5%;
}

.tractor img {
    width: 100%;
}
.tractor::after {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    background: url('img/steam.png') no-repeat;
    background-size: 120px;
    position: absolute;
    top: -37%;
    left: 56%;
    opacity: 0;
}
.f_wheel {;
    width: 125px;
    position: absolute;
    top: 66.5%;
    left: 13%;
}

.f_wheel img {
    width: 100%;
}

.b_wheel {
    width: 190px;
    position: absolute;
    top: 58.8%;
    left: -7%;
}

.b_wheel img {
    width: 100%;
}

以及动画的 CSS：

.tractor {
    -webkit-animation: tractor-bounce 3s ease-in-out infinite,
                       tractor-go 10s ease-in-out forwards;
}

.tractor::after {
    -webkit-animation: steam 4s 2s infinite;
}

.f_wheel,
.b_wheel {
    -webkit-animation: wheel-spin 10s ease-in-out forwards;
}

.f_wheel {
    -webkit-animation: front-wheel-go 10s ease-in-out forwards,
                       wheel-spin 10s ease-in-out forwards;
}

.b_wheel {
    -webkit-animation: back-wheel-go 10s ease-in-out forwards,
                       wheel-spin 10s ease-in-out forwards;
}


/*  Keyframes - WebKit only
------------------------------------------ */

@-webkit-keyframes tractor-bounce {
    50%  { -webkit-transform: rotate(-5deg) translateY(-3px); }
}

@-webkit-keyframes tractor-go {
    100% { left: 70%; }
}

@-webkit-keyframes steam {
    40%  { opacity: .8; }
    60%  { opacity: 1; }
    100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}

@-webkit-keyframes wheel-spin {
    0% { -webkit-transform: translateX(0px) rotate(50deg); }
    100%   { -webkit-transform: translateX(0px) rotate(480deg); }
}

@-webkit-keyframes front-wheel-go {
    100%   { left: 88%; }
}

@-webkit-keyframes back-wheel-go {
    100%   { left: 68.5%; }
}

JSFiddle 展示它的实际效果：http://jsfiddle.net/0j5L92vh/1/

[PS - 这是我在这里的第一篇文章，非常感谢！如果我需要添加任何其他内容，请告诉我。]

【问题讨论】：

拥有一个 jsfiddle 总是很高兴，这样人们就可以尝试一些事情：jsfiddle.net/0j5L92vh
如果你能提供一个 js fiddle 那就太好了！
编辑：@Stefan - 我更新了上面的 jsfiddle：jsfiddle.net/0j5L92vh/1/
动画超酷！但也许你可以在没有动画的情况下做一个小提琴？您在这里遇到的问题与动画没有任何关系 - 这可能是定位问题。

标签： html css animation

【解决方案1】：

我找到了解决您问题的方法。

我利用您提供的 .container div 来保持所有内容的相对位置到您的拖拉机图像。您可以看到所做的 css 代码中的更改它适用于非 webkit 浏览器。它不适用于 9 号之前的 Internet Explorer 版本。

我所做的更改仅针对您的 css。

jsfiddle：http://jsfiddle.net/larryjoelane/h324j6u6/113/

css:

     .container{
    width: 380px;    
    position: relative;

    /*bind the animation and set its properties*/
    -webkit-animation: tractor 10s linear 0s; /* Chrome, Safari, Opera */
    animation: tractor 10s linear 0s;
}
/*bind the wheel-spin animation*/
.f_wheel,
.b_wheel {
    -webkit-animation: wheel-spin 10s ease-in-out forwards;
    animation: wheel-spin 10s ease-in-out forwards;
}
/*bind the tractor bounce-animation*/
.tractor {
    -webkit-animation: tractor-bounce 3s ease-in-out infinite,
                       tractor-go 10s ease-in-out forwards;

    animation: tractor-bounce 3s ease-in-out infinite,
                       tractor-go 10s ease-in-out forwards;
}
.tractor img{

    width:100%;
}

.b_wheel {
    width: 190px;
    position: relative;
    top: -120px;
    left: -7%;
}

.b_wheel img {
    width: 100%;
}

.f_wheel{
    width: 125px;
    position:relative;
    top: -258px;
    left: 65%;
}

.f_wheel img {
    width: 100%;
}



/* Chrome, Safari, Opera */
@-webkit-keyframes tractor {
    0%   { left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:400px; top:0px;}
    75%  {left:600px; top:0px;}
    100% {left:800px; top:0px;}
}



/* Standard syntax */
@keyframes tractor {
     0%   { left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:400px; top:0px;}
    75%  {left:600px; top:0px;}
    100% {left:800px; top:0px;}
}




/*standard browser animation*/
@keyframes wheel-spin{

    0% { transform: translateX(0px) rotate(50deg); }
    100%   { transform: translateX(0px) rotate(480deg); }    

}
/*webkit browser animation*/
@-webkit-keyframes wheel-spin{

    0% { -webkit-transform: translateX(0px) rotate(50deg); }
    100%   { -webkit-transform: translateX(0px) rotate(480deg); }


}
/*webkit tractor-bounce animation*/
@-webkit-keyframes tractor-bounce {
    50%  { -webkit-transform: rotate(-5deg) translateY(-3px); }
}

/*standard tractor-bounce web browser animation*/
@keyframes tractor-bounce {
    50%  { transform: rotate(-5deg) translateY(-3px); }
}

【讨论】：