CSS 차량 애니메이션

화면을 가로 질러 움직이는 트랙터에 애니메이션을 적용하려고합니다. 나는 화면에서 완벽하게 작동하고 있지만 다른 플랫폼 (webkit- 만 포함)에서 작동하도록하고 싶습니다. 크기를 재조정 할 때 트랙터는 유동적이지만 바퀴는 움직이지 않습니다. 어떻게 그들을 함께 조정할 수 있습니까?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/

[애니메이션

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

<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의 추신 - 이것은 내 첫 게시물 여기에 너무 많은 감사 미리! 다른 것을 포함해야하는지 알려주십시오.]

출처

2014-11-13 Lloyd

명이 몇 가지 시도 할 수 있도록 jsfiddle을 가지고 항상 좋은 : 당신이 제공 할 수있는 경우 http://jsfiddle.net/0j5L92vh/ – Stefan

을 JS 바이올린 그게 좋을거야! – GSaunders

편집 : @Stefan - 위의 jsfiddle를 업데이트했습니다 : [jsfiddle.net/0j5L92vh/1/](http://jsfiddle.net/0j5L92vh/1/) – Lloyd

문제점에 대한 해결책을 찾았습니다.

당신이 제공 한 .container div를 활용하여 트랙터 이미지에 상대적인 위치가 모두 유지되도록했습니다. 이 아닌 웹킷 브라우저에서 작동하게 만드는 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 차량 애니메이션

답변

관련 문제