我有一个旋转轮动画

https://codepen.io/dpegasusm/pen/jrBKNk

当车轮的每个不同部分经过时，车轮中心应该点击 . 目前它没有 . 任何人都有任何想法我可以做些什么来修复它，以便每次颜色变化通过箭头它正确滴答？

它需要一些东西来减慢滴答动画的速度随着轮子的速度减慢 .

这是Javascript：

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){

/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){

    //add 1 every click
    clicks ++;

    /*multiply the degree by number of clicks generate random number between 1 - 360, then add to the new degree*/
    var newDegree = degree*clicks;
    var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
    totalDegree = newDegree+extraDegree;

    $('#inner-wheel').css({
        'transform' : 'rotate(' + totalDegree + 'deg)'
    });

    $('#center').addClass('click');

    setTimeout(function () {
        $('#center').removeClass('click');
    }, 6000);

});

});//DOCUMENT READY

点击的CSS：

@keyframes tick {
   0%, 100%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

.click {
    /* -webkit-animation: tick 0.2s ease-out infinite; Chrome, Safari, Opera */
    animation-name: tick;
    animation-duration: 0.2s; /* or: Xms */
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
javascript jquery html css