car animate

@keyframes car-animate {
    0% {
        -webkit-transform: rotate(-20deg) translate3d(0,0,0);
        transform: rotate(-20deg) translate3d(0,0,0);
    }
    10% {
        -webkit-transform: rotate(-0deg) translate3d(-100*@rpx,120*@rpx,0);
        transform: rotate(-0deg) translate3d(-100*@rpx,120*@rpx,0);
    }
    11% {
        opacity: 1;
    }
    12% {
        opacity: 0;
    }
    20% {
        -webkit-transform: rotate(0deg) translate3d(-120*@rpx,180*@rpx,0);
        transform: rotate(0deg) translate3d(-120*@rpx,180*@rpx,0);
        opacity: 0;
    }
    25% {
        background: url("images/car_top.png") no-repeat;
        background-size: 38*@rpx 28*@rpx;
    }
    28% {
        opacity: 0;
    }
    29% {
        opacity: 1;
    }
    30% {
        -webkit-transform: rotate(0deg) translate3d(-180*@rpx,235*@rpx,0);
        transform: rotate(0deg) translate3d(-180*@rpx,235*@rpx,0);
        background: url("images/car_middle.png") no-repeat;
        background-size: 53*@rpx 28*@rpx;
    }
    38% {
        opacity: 1;
    }
    39% {
        opacity: 0;
    }
    40% {
        -webkit-transform: rotate(0deg) translate3d(50*@rpx,280*@rpx,0);
        transform: rotate(0deg) translate3d(50*@rpx,280*@rpx,0);
        background: url("images/car_middle.png") no-repeat;
        background-size: 53*@rpx 28*@rpx;
    }
    41% {
        opacity: 0;
    }
    50% {
        -webkit-transform: rotate(0deg) translate3d(90*@rpx,310*@rpx,0);
        transform: rotate(0deg) translate3d(90*@rpx,310*@rpx,0);
    }
    60% {
        -webkit-transform: rotate(0deg) translate3d(130*@rpx,340*@rpx,0);
        transform: rotate(0deg) translate3d(130*@rpx,340*@rpx,0);
        background: url("images/car_bottom.png") no-repeat;
        background-size: 53*@rpx 28*@rpx;
        opacity: 0;
    }
    61% {
        opacity: 1;
    }
    /*70% {*/
        /*-webkit-transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
        /*transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
    /*}*/
    /*80% {*/
        /*-webkit-transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
        /*transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
    /*}*/
    /*90% {*/
        /*-webkit-transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
        /*transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
    /*}*/
    100% {
        -webkit-transform: rotate(0deg) translate3d(-350*@rpx,340*@rpx,0);
        transform: rotate(0deg) translate3d(-350*@rpx,340*@rpx,0);
        background: url("images/car_bottom.png") no-repeat;
        background-size: 60*@rpx 28*@rpx;
    }
}

.car-animate {
    position: absolute;
    display: inline-block;
    top: 100*@rpx;
    right: 130*@rpx;
    width: 38px;
    height: 28px;
    background: url("images/car_top.png") no-repeat;
    background-size: 38*@rpx 28*@rpx;
    -webkit-animation-name: car-animate;
    animation-name: car-animate;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 10s;
    -webkit-animation-duration: 10s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

新的
@keyframes car-animate {
    0% {
        -webkit-transform: rotate(-20deg) translate3d(0,0,0);
        transform: rotate(-20deg) translate3d(0,0,0);
    }
    15% {
        -webkit-transform: rotate(0deg) translate3d(-100*@rpx,115*@rpx,0);
        transform: rotate(0deg) translate3d(-100*@rpx,115*@rpx,0);
    }
    16% {
        opacity: 1;
    }
    16.4% {
        opacity: 0;
    }
    25% {
        -webkit-transform: rotate(-10deg) translate3d(-110*@rpx,180*@rpx,0);
        transform: rotate(-10deg) translate3d(-110*@rpx,180*@rpx,0);
    }
    27% {
        background: url("images/car_top.png") no-repeat;
        background-size: 38*@rpx 28*@rpx;
    }
    31% {
        opacity: 0;
    }
    34% {
        opacity: 1;
    }
    35% {
        -webkit-transform: rotate(0deg) translate3d(-170*@rpx,235*@rpx,0);
        transform: rotate(0deg) translate3d(-170*@rpx,235*@rpx,0);
        background: url("images/car_middle.png") no-repeat;
        background-size: 53*@rpx 28*@rpx;
    }
    55% {
        opacity: 1;
    }
    56% {
        opacity: 0;
    }
    60% {
        -webkit-transform: rotate(0deg) translate3d(50*@rpx,280*@rpx,0);
        transform: rotate(0deg) translate3d(50*@rpx,280*@rpx,0);
        background: url("images/car_middle.png") no-repeat;
        background-size: 53*@rpx 28*@rpx;
    }
    65% {
        opacity: 0;
    }
    65% {
        -webkit-transform: rotate(0deg) translate3d(90*@rpx,310*@rpx,0);
        transform: rotate(0deg) translate3d(90*@rpx,310*@rpx,0);
    }
    66% {
        -webkit-transform: rotate(0deg) translate3d(130*@rpx,340*@rpx,0);
        transform: rotate(0deg) translate3d(130*@rpx,340*@rpx,0);
        background: url("images/car_bottom.png") no-repeat;
        background-size: 53*@rpx 28*@rpx;
        opacity: 0;
    }
    67% {
        opacity: 1;
    }
    /*70% {*/
        /*-webkit-transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
        /*transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
    /*}*/
    /*80% {*/
        /*-webkit-transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
        /*transform: rotate(0deg) translate3d(-300*@rpx,300*@rpx,0);*/
    /*}*/
    100% {
        -webkit-transform: rotate(0deg) translate3d(-330*@rpx,340*@rpx,0);
        transform: rotate(0deg) translate3d(-330*@rpx,340*@rpx,0);
        background: url("images/car_bottom.png") no-repeat;
        background-size: 60*@rpx 28*@rpx;
    }
}

.car-animate {
    position: absolute;
    top: 100*@rpx;
    right: 130*@rpx;
    width: 38px;
    height: 28px;
    background: url("images/car_top.png") no-repeat;
    background-size: 38*@rpx 28*@rpx;
    -webkit-animation-name: car-animate;
    animation-name: car-animate;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 10s;
    -webkit-animation-duration: 10s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}