current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

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);
    }
}
share|improve this question
    
How long do you want it to spin while slowing down (rotations, seconds) ? –  ExpertSystem Jun 13 '13 at 19:08
    
3000ms, or around that. –  Jony Kale Jun 13 '13 at 19:10

2 Answers 2

up vote 0 down vote

You could create a second key-frames-based animation for slowing down, e.g. 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), e.g.: 

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).

share|improve this answer
up vote 0 down vote

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)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.