StackOverflow_17094913: spinning-wheel-stop-slowly-css3

Illustration of answer to http://stackoverflow.com/questions/17094913/spinning-wheel-stop-slowly-css3.

by Don Ricardo JR

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<link rel="stylesheet" href="http://driptone.com/jony/applications/luckyspin/css/bootstrap.css">
<link rel="stylesheet" href="http://driptone.com/jony/applications/luckyspin/css/style.css">
<body class="container">
    <br />
    <br />
    <div class="game_base">
        <div class="wheel">
            <div class="wheel_spin" onclick="loadLuck();"></div>
        </div>
    </div>
    <br />
    <div id="luck"> <span style="color: red;">
            Spin the wheel !
        </span>

    </div>
</body>

CSS

.wheel_spin {
    background-image: url("https://dricardo1.github.io/pdi_wheel_app/myApp/www/img/pdiwheel.png");
    background-repeat: no-repeat;
    background-position:center;
    width: 500px;
    height: 500px;
    margin-left: 10%;
}
.wheel_spin_on {
    background-image: url("https://dricardo1.github.io/pdi_wheel_app/myApp/www/img/pdiwheel.png");
    background-repeat: no-repeat;
    background-position:center;
    width: 500px;
    height: 500px;
    margin-left: 10%;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.wheel_spin_stopping {
    background-image: url("https://dricardo1.github.io/pdi_wheel_app/myApp/www/img/pdiwheel.png");
    background-repeat: no-repeat;
    background-position:center;
    width: 500px;
    height: 500px;
    margin-left: 10%;
    -webkit-animation-name: slowdown;
    -webkit-animation-duration: 6000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes slowdown {
    0% {
        -webkit-transform: rotate(0deg);
    }
    13% {
        -webkit-transform: rotate(646deg);
    }
    25% {
        -webkit-transform: rotate(1093deg);
    }
    38% {
        -webkit-transform: rotate(1566deg);
    }
    50% {
        -webkit-transform: rotate(1931deg);
    }
    63% {
        -webkit-transform: rotate(2211deg);
    }
    75% {
        -webkit-transform: rotate(2394deg);
    }
    88% {
        -webkit-transform: rotate(2491deg);
    }
    100% {
        -webkit-transform: rotate(2520deg);
    }
}

JavaScript

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

function stopWheel() {
    $(".wheel").html("<div class='wheel_spin_stopping'></div>");
    setTimeout(function () {
        $(".wheel").html("<div class='wheel_spin' onClick='loadLuck();'></div>");
    }, 6000);
}

var timeoutID = '';

function loadLuck() {
    clearTimeout(timeoutID);
    spinWheel();
    $("#luck").html('Spinning......');
    timeoutID = setTimeout(function () {
        var luckyNumber = Math.floor(
        Math.random() * 1000) + 1;
        $("#luck").html("Sorry but, bad luck. You have won nothing! number: " + luckyNumber);
        stopWheel();
    }, 3000);
}