synch css animation time ( from to )

Question

http://jsfiddle.net/7nm7xpwa/

See code here ^

Basically I have a class that I am adding to a div that animates the background position, creating a moving stripe effect (like a barber pole). The class is added on a click event and as such, the start and stop of the background animation begins shortly after the click. When more than one div is used, they are usually out of synch. Is there a way to ensure that the animation of a second div clicked will be synchronous to the same animation on the first div clicked?

Thank you for your time!

code here as well:

CSS

.selected {

  background: linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  

  background: -webkit-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  

    background: -o-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  


      background: -moz-linear-gradient(
    45deg, 
    rgba(255,255,255, .95)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(255,255,255, .95)  50%, 
    rgba(255,255,255, .95)  75%, 
    transparent       75%, 
    transparent
  );  


  animation: barberpole 2s linear infinite;

  -webkit-animation: barberpole 2s linear infinite;

  -moz-animation: barberpole 2s linear infinite;

/* opacity: .9;  */



}

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}


@-webkit-keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}


@-moz-keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 200px 100px; }
}



.pixel {
 width: 100px;
    height: 100px;
    background-color: grey;
float:left;
}

JS

$('.pixel').click(function(){

    $(this).addClass('selected');
});

HTML

<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>
<div class='pixel'></div>

Answer 1

I have been trying this for the last couple of hours, I found this challenging and fun, but I could not find the perfect solution.

I found no way of just following the previous animation so I needed to reset all selected classes and add them back.

The way I got this (somewhat) working was by using the delay function setting it to the same time as the animation, removing and re-adding the class immediately did not have the same effect unfortunately.

Here is what I came up with:

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected').delay(2000).queue(function(){
                $(this).addClass('selected').dequeue();
            }); 
        }
    });
    $(this).addClass('selected');
});

Here is the updated fiddle: http://jsfiddle.net/7nm7xpwa/9/

EDIT: I found it! Here is the full solution of the above trick (resetting the animation). It basically removes the element completely then re-adds it, this way resetting the animation:

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            var elm = this,
                newone = elm.cloneNode(true);
            elm.parentNode.replaceChild(newone, elm);
        }
    });
    $(this).addClass('selected');
});

Source: Restart CSS Animation | CSS-TRICKS

Here is the new fiddle: http://jsfiddle.net/7nm7xpwa/10/

EDIT #2: In the comments of above article on CSS-TRICKS, I found an ever more simple way of doing the animation reset / element replacement as follows:

$('.pixel').click(function () {
    $('.pixel').each(function () {
        if ($(this).hasClass('selected')) {
            $(this).replaceWith($(this).clone(true)); // turned this into a 1 liner
        }
    });
    $(this).addClass('selected');
});

Another version of your fiddle with this: http://jsfiddle.net/7nm7xpwa/11/