synch css animation time ( from to ) -

synch css animation time ( from to ) -

http://jsfiddle.net/7nm7xpwa/

see code here ^

basically have class adding div animates background position, creating moving stripe effect (like barber pole). class added on click event , such, start , stop of background animation begins shortly after click. when more 1 div used, out of synch. there way ensure animation of sec div clicked synchronous same animation on first div clicked?

thank time!

code here 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 { { background-position: 0 0; } { background-position: 200px 100px; } } @-webkit-keyframes barberpole { { background-position: 0 0; } { background-position: 200px 100px; } } @-moz-keyframes barberpole { { background-position: 0 0; } { 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>

i have been trying lastly couple of hours, found challenging , fun, not find perfect solution.

i found no way of next previous animation needed reset selected classes , add together them back.

the way got (somewhat) working using delay function setting same time animation, removing , re-adding class did not have same effect unfortunately.

here came 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 updated fiddle: http://jsfiddle.net/7nm7xpwa/9/

edit: found it! here total solution of above trick (resetting animation). removes element re-adds it, way resetting 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 new fiddle: http://jsfiddle.net/7nm7xpwa/10/

edit #2: in comments of above article on css-tricks, found ever more simple way of doing animation reset / element replacement follows:

$('.pixel').click(function () { $('.pixel').each(function () { if ($(this).hasclass('selected')) { $(this).replacewith($(this).clone(true)); // turned 1 liner } }); $(this).addclass('selected'); });

another version of fiddle this: http://jsfiddle.net/7nm7xpwa/11/

css animation addclass timing