Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS animation problem in firefox with class removal

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #43240
    lukefrake
    Participant

    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

    #127438
    Paulie_D
    Member

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

    …because it does in Chrome.

    #127442
    lukefrake
    Participant

    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.

    #127444
    Paulie_D
    Member

    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

    #127455
    lukefrake
    Participant

    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.

    #127457
    Paulie_D
    Member

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

    #127459
    lukefrake
    Participant

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

    #127753
    lukefrake
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.