CSS animation problem in firefox with class removal

[lukefrake]

Hello Everybody,

I have a problem to do with CSS animation in firefox but it working in chrome, I have made a pen for it here – http://codepen.io/lukefrake/pen/Ckcfu

If you slide over the different divs at the bottom, it should apply the class bounce which is the css animation.

The problem I have is, if you are in firefox and you move over them quickly, the div’s will bounce independent of each over.
If you look at the same thing in chrome the bounce happens together.

Does firefox have a problem with adding and removing classes in the same functions or is it a problem with the css animation not restarting itself? Very confusing!

Thanks
Luke

[Paulie_D]

Is it supposed to bounce/highlight 2 divs at a time?

…because it does in Chrome.

[lukefrake]

It should highlight the selected div, and the div to the right. It does do that in both firefox and chrome, but if you move it quickly they wont bounce at the same time in Firefox, like they do in Chrome.

[Paulie_D]

I think this is a function of the animation running while you are moving the mouse.

You also seem to be calling the animation twice in .bounce.

Does this have to be a JS solution? Couldn’t you do this with a hover state?

http://codepen.io/anon/pen/AEngH

[lukefrake]

Hello Paulie_D,

How do you mean calling the animation twice?

It could be done with hovers in my codepen but not in my actual version because of where they exist in the markup.

Your solution seems to make chrome bounce independently as well as firefox.

[Paulie_D]

>How do you mean calling the animation twice?

-webkit-animation-name: highlightQuick;
-moz-animation-name: highlightQuick;
-o-animation-name: highlightQuick;
animation-name: highlightQuick;

-webkit-animation: highlightQuick 2s 0s 1;
-moz-animation: highlightQuick 2s 0s 1;
-ms-animation: highlightQuick 2s 0s 1;
-o-animation: highlightQuick 2s 0s 1;

[lukefrake]

Oh I miss understood the animations, I thought you declare the name and then you declare the speeds after, Looking back at it I was silly to think that haha!

ill take that off thanks :)

[lukefrake]

This has been figured out now by adding a pause before the add class. Turns out firefox does it so quickly it doesn’t have enough time.

Thanks! :)

[Author]

Posts