CSS анимация автомобиля

Я пытаюсь анимировать трактор, перемещающийся по экрану. У меня это работает отлично на моем экране, однако я хочу, чтобы он работал на разных платформах (включая только -webkit-). Когда я меняю размер, трактор жидкости, но колеса нет. Как я могу заставить их приспособиться друг к другу?CSS анимация автомобиля

<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 - Это мой первый пост, здесь так большое спасибо! Дайте мне знать, если мне нужно включить что-нибудь еще.]

источник

2014-11-13 Lloyd

всегда приятно иметь jsfiddle, чтобы люди могли попробовать некоторые вещи: http://jsfiddle.net/0j5L92vh/ – Stefan

Если бы вы могли обеспечить JS скрипку это было бы прекрасно! – GSaunders

EDIT: @Stefan - я обновил выше jsfiddle: [jsfiddle.net/0j5L92vh/1/](http://jsfiddle.net/0j5L92vh/1/) – Lloyd

Я нашел решение вашей проблемы.

Я использовал контейнер .container, который вы предоставили, чтобы все позиционировалось относительно на изображение вашего трактора. Вы можете видеть, что изменения в коде css, который сделал, сделают , он работает в браузерах без веб-браузера. Он не будет работать в версиях Internet Explorer до номера 9.

Изменения, внесенные мной, относятся только к вашему 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); } 
}

источник

2014-11-22 15:37:24

CSS анимация автомобиля

ответ

Смежные вопросы