easing speed of blink for text in a jackpot game

Question

I am making a jackpot game with a selector very similar to this one

I have absolutely no idea where to start. My first thought was to use an array of randomly selected numbers sent from the server side to avoid cheating and animate those with jquery or css.

Then i thought about useing just jquery since i know it better and having the blink interval be a recursive fucnction that returns the values for easing speed i want. (the values would be pretty much exactly like in the video, no more than 3-4 seconds).

$('.blink').blink(); // default is 500ms blink interval.
$('.blink').blink(100); // causes a 100ms blink interval.

But now I am at a loss for where to get started since this has to be mobile friendly. What would you do?

---

UPDATE

$( document ).ready(function() {

var time = 0;
var diff = 50;
var minTime = 0;
var maxTime = 7000;


function easeInOutExpo(t, b, c, d) {
    t /= d;
    return c*t*t*t + b;
};


$("#clickme").click(function() {
    for (var i = 0, len = diff; i <= len; i++) {
      (function(s) {
        setTimeout(function() {
            $('#book').html("Page " + s + " turned");
        }, time);
      })(i); //<--------------i have no clue what this does------------
      time = easeInOutExpo(i, minTime, maxTime, diff);
    }
});

});//document ready

I've gotten the basic mechanic down, but when you click on it a second time instead of 50 it goes to 0. this is not good behavior as I am going to use these numbers to iterate through a randomly generated array.

Can anyone explain this behaviour? I've included a JS fiddle here. Thank you!

Answer 1

You can use simple css animation.

 @keyframes blink { 0% { background-color:red; } 10% { background-color:purple; } 20% { background-color:gray; } 30% { background-color:green; } 40% { background-color:white; } 50% { background-color:cyan; } 65% { background-color:yellow; } 100% { background-color:black } } .Blink{ animation: blink 2s 1 ease-out; background-color:black; height:100px; width:100px; } 

 <div class="Blink">