Synchronize css animation timing (from to)

http://jsfiddle.net/7nm7xpwa/

See code here ^

Basically I have a class that I add to a div that animates the background position, creating a moving bar effect (like a barber post). The class is added to the click event and as such, the background animation starts and stops shortly after the click. When more than one div is used, they are usually out of sync. Is there a way to ensure that the animation of the second div clicked is in sync with the same animation when the first element is clicked?

Thank you for your time!

here:

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>

      

+3


source to share


2 answers


I've tried this for the last two hours, I found it challenging and funny, but I couldn't find the perfect solution.

I didn't find a way to just follow the previous animation, so I needed to reset all selected

classes and add them back.

The way I got this (somewhat) working was that with the function delay

it was being set at the same time as animating, removing and re-adding the class immediately didn't have the same effect, unfortunately.

This 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 a complete solution to the above trick (reset animation). It basically removes the element entirely and then re-adds it, thus 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 a new fiddle: http://jsfiddle.net/7nm7xpwa/10/

EDIT # 2 . In the comments to this article on CSS-TRICKS, I found an easier way to do the reset / element animation replacement like this:

$('.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: http://jsfiddle.net/7nm7xpwa/11/

0


source


There are several approaches you can take.

Fake it - just cover the original with a pseudo-element or something and click to remove the overlay. The only downside to this is that the animation still works when it's closed, but this shouldn't be a problem if you're only animating multiple elements. If you are animating a lot of elements you shouldn't be using CSS animations in the first place, most likely



WaitanimationIteration

. Check that the first one animates, if so start the other when the animationIteration

fire. The disadvantage of this is that there will be a slight delay before the animation after the first run

Track the total animation time . Start timer on first click (or earlier), set animation delay to sync negative value with current time when next are clicked. It is relatively difficult to do it accurately.

0


source







All Articles