html5 风车特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="" content="">
    <title>风车特效</title>
    <style>
    *{margin: 0;padding: 0;}
   .picture{
         position: relative;
         100%;
   }
     img{
        display: block;
        100%;

    }





@keyframes spin
{
from {transform: rotate(-360deg)}
to {transform: rotate(0deg)}
}

@-moz-keyframes spin /* Firefox */
{
from {transform: rotate(-360deg)}
to {transform: rotate(-0deg)}
}

@keyframes ff
{
from {transform: translate(100%)}
to {transform:translate(-2000%)}
}

@-moz-keyframes ff /* Firefox */
{
from {transform: translate(100%)}
to {transform:translate(-2000%)}
}

    .fc1{
        25%;
        position: absolute;
        top:17%;
        left: 16.4%;
        animation: spin 2s linear infinite;
    }
     .fc2{
        15%;
        position: absolute;
        top:57%;
        left: 44.1%;
        animation: spin 4s linear infinite;
    }
     .fc3{
        20%;
        position: absolute;
        top:43.2%;
        left: 60.4%;
        animation: spin 3s linear infinite;
    }
    .car{
        5%;
        position: absolute;
        top:92.2%;
        left: 88%;
         animation: ff 25s ease-in infinite;
    }
     .yun{
        5%;
        position: absolute;
        top:12.2%;
        left: 88%;
         animation: ff 35s ease-in infinite;
    }

   .on{

         animation-play-state: paused;

    }
    </style>
</head>
<body>
    <div class="picture">
        <img src="images/caodi.png" alt="">
        <div class="tt">
            <img src="images/fengche.png" alt="" class="fc1" >
            <img src="images/fengche.png" alt="" class="fc2">
            <img src="images/fengche.png" alt="" class="fc3">
           <img src="images/yun.png" alt="" class="yun">
           <img src="images/car.png" alt="" class="car">
       </div>
    </div>
     <script src="js/jquery.js"></script>
    <script>

            // var f=document.getElementById('on');
            // f.style.animation='none';
           $(".tt img").hover(function(){
              $(this).addClass("on").siblings().removeClass("on");
           },function(){
               $(this).removeClass("on");
           });


    </script>
</body>
</html>