Spinning wheel stop slowly? CSS3

Question

My spinning game: view-source: http://driptone.com/jony/applications/luckyspin/

Previous question (Explains about the animation): CSS spinning wheel stop after 5 seconds?

Please click on "Spin", it will spin the wheel.

I want to make so at some point, the wheel will start slowly stopping, by slowly adding more MS to the animation until it becomes really really slow.

is it possible to make, without re-setting the image ? By re-setting I mean, if the wheel is currently spinning at 440 Degrees, Make it spin slower, without resetting it to 0 degrees.

Is that possible?

I will be able to use Javascript aswell, considering I want it to slowly stop right after the generated number appears (AJAX response arrives)

Original JAVASCRIPT code:

function spinWheel() {
    $(".wheel").html("<div class='wheel_spin_on'></div>");
}

function stopWheel() {
    $(".wheel").html("<div class='wheel_spin' onClick='loadLuck();'></div>");
}
    var timeoutID = '';

function loadLuck() {
    clearTimeout(timeoutID);
    spinWheel();
    $("#luck").html('Spinning......');
    timeoutID = setTimeout(function() {
        $.post('ajax.php', {getLuck : '1'}, function(data) {
            $("#luck").html(data);
            stopWheel();
        });
    }, 3000);
}

CSS code:

.wheel_spin {
background-image: url("../img/spin2.png");
background-repeat: no-repeat;
width: 262px;
height: 261px;
margin-left: 1%;
}

.wheel_spin_finished {
    background-image: url("../img/spin.png");
    background-repeat: no-repeat;
    width: 262px;
    height: 261px;
    margin-left: 1%;    
}

.wheel_spin_on {
    background-image: url("../img/spin.png");
    background-repeat: no-repeat;
    width: 262px;
    height: 261px;
    margin-left: 1%;    
  -webkit-animation-name: spin;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 500ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Answer 1

You can set this with more keyframes:

.rotate {
    width: 100px;
    height: 100px;
    background-color: green;
    -webkit-animation:  spin 5s linear;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    10% { -webkit-transform: rotate(360deg); }
    20% { -webkit-transform: rotate(720deg); }
    40% { -webkit-transform: rotate(1080deg); }
    70% { -webkit-transform: rotate(1440deg); }
    100% { -webkit-transform: rotate(1800deg); }
}

fiddle

Alternative: You can set a bezier curve in the timing function:

#dash {
    width: 200px;
    height: 200px;
    left: 35px;
    top: 35px;
    position: absolute;
    background-color: lightblue;
    -webkit-transition: all 10s cubic-bezier(0.25, 0.1, 0.25, 1)
    -webkit-transform: rotateZ(0deg);
}

#dash:hover {
    -webkit-transform: rotateZ(3600deg);
}

bezier demo (webkit)

Answer 2

You could create a second key-frames -based animation for slowing down, eg like this:

@-webkit-keyframes slowdown {
      0% { -webkit-transform: rotate(0deg); }
     13% { -webkit-transform: rotate(630deg); }
     25% { -webkit-transform: rotate(1080deg); }
     38% { -webkit-transform: rotate(1530deg); }
     50% { -webkit-transform: rotate(1890deg); }
     63% { -webkit-transform: rotate(2160deg); }
     75% { -webkit-transform: rotate(2340deg); }
     88% { -webkit-transform: rotate(2430deg); }
    100% { -webkit-transform: rotate(2466deg); }
}

Then, in your stopWheel() function you can set the appropriate class in order to start the slow-down and schedule the animation stop (by yet another class change), eg:

function stopWheel() {
    /* Start the slowing down */
    $(".wheel").html("<div class='wheel_spin_stopping'></div>");

    /* Schedult to stop in 6 seconds 
       (should be the same as the animation duration) */
    setTimeout(function() {
        $(".wheel").html("<div class='wheel_spin' onClick='loadLuck();'></div>");
    }, 6000);
}

Finally, you need a CSS style definition for the stopping class:

.wheel_spin_stopping {
    ...
    -webkit-animation-name: slowdown;
    -webkit-animation-duration: 6000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

}

(Note, the sample-code is only webkit compatible, but modifying it to be cross-browser compatible is straight-forward.)

See, also, this short demo (also webkit compatible only).