你好我已经创建了简单的动画，但是我想添加一些像这个视频的效果，在汽车停止转动后，车速将会是慢，如果汽车开始离开，车轮转动，车速会很快：
此处为代码：
$(document).ready(function () {
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .wheelInCar').css('background-image',
'url(' + getImgWheel + ')'
);
});
var running = false;
$('.car-model').click(function (e) {
e.preventDefault();
var index = $(this).data("index");
var $pre = $('.car-image.current');
var $dom = $('.car-image[data-car-index="' + index + '"]');
if ($dom.hasClass("current") || running) {
return;
}
running = true;
$dom.addClass('current');
$pre.addClass('left').removeClass('current');
setTimeout(function () {
$pre.addClass('no-transition');
$pre.removeClass('left');
setTimeout(function () {
$pre.removeClass('no-transition');
running = false;
}, 100);
}, 2100);
});
}).car{
height:600px;
padding:40px 0;
background-color:#efefef;
overflow:hidden;
}
.car .click{
width:100%;
padding:10px;
text-align:center;
border:1px solid #0094ff;
margin-bottom:30px;
}
.car-image {
position:absolute;
top: 100px;
margin-bottom: 30px;
-moz-transform: translate(160%, 0);
-ms-transform: translate(160%, 0);
-o-transform: translate(160%, 0);
-webkit-transform: translate(160%, 0);
transform: translate(160%, 0);
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.car .car-image.current {
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
display:block;
animation-name:comIn;
animation-duration:2s;
}
.car .car-image.left {
-moz-transform: translate(-160%,0);
-ms-transform: translate(-160%,0);
-o-transform: translate(-160%,0);
-webkit-transform: translate(-160%,0);
transform: translate(-160%,0);
display:block;
}
.car .car-image.no-transition {
transition:none;
}
.car .car-image .wheelInCar{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
-webkit-animation: wheelRotating 2s linear infinite;
-moz-animation: wheelRotating 2s linear infinite;
-ms-animation: wheelRotating 2s linear infinite;
-o-animation: wheelRotating 2s linear infinite;
animation: wheelRotating 2s linear infinite;
}
.car .car-image .wheelInCar.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top:94px;
left:98px;
}
.car .car-image .wheelInCar.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top:94px;
right:75px;
}
.car .wheelEleContainer{
cursor:pointer;
}
@keyframes comIn {
0% {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
80% {
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
100%{
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes wheelRotating {
from {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<div class="row">
<div class="car-button-container">
<div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image current" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>