Jquery动画使用关键帧

时间：2017-03-20 04:45:44

标签： javascript jquery css

你好我已经创建了简单的动画，但是我想添加一些像这个视频的效果，在汽车停止转动后，车速将会是慢，如果汽车开始离开，车轮转动，车速会很快：

Youtube video

此处为代码：

＆＃13;
＆＃13; 
$(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);

    });
})
＆＃13; 
.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);
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题