Grow your CSS skills. Land your dream job.

CSS animation problem in firefox with class removal

  • # March 8, 2013 at 6:35 am

    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

    # March 8, 2013 at 6:41 am

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

    …because it does in Chrome.

    # March 8, 2013 at 6:59 am

    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

    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

    # March 8, 2013 at 7:59 am

    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.

    # March 8, 2013 at 8:04 am

    >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;

    # March 8, 2013 at 8:34 am

    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

    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! :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".