- This topic is empty.
March 8, 2013 at 6:35 am #43240
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!
LukeMarch 8, 2013 at 6:41 am #127438
Is it supposed to bounce/highlight 2 divs at a time?
…because it does in Chrome.March 8, 2013 at 6:59 am #127442
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.March 8, 2013 at 7:24 am #127444
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?March 8, 2013 at 7:59 am #127455
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.March 8, 2013 at 8:04 am #127457
>How do you mean calling the animation twice?
-webkit-animation: highlightQuick 2s 0s 1;
-moz-animation: highlightQuick 2s 0s 1;
-ms-animation: highlightQuick 2s 0s 1;
-o-animation: highlightQuick 2s 0s 1;March 8, 2013 at 8:34 am #127459
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 :)March 11, 2013 at 11:06 am #127753
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.
- The forum ‘CSS’ is closed to new topics and replies.