1

I just started playing with pure CSS animations and I noticed that some animations don't work when jQuery is present. So far I noticed that translate properties like translateY don't work.

I'm providing two jsfiddle examples, one with jQuery and one without it. Everything else is the same. There is no custom JavaScript code, just the inclusion of the jQuery library.

CSS code:

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(8%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(50%); 
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}

If you open the developer tools inspector and deactivate and activate the -webkit-animation-name property the animation will start running! I'm testing with Chrome. It's not working at all with Firefox or IE.

Does anyone have any clue why this is happening?

UPDATE: Apparently it just doesn't work with jQuery 1.9.1 on some systems

UPDATE: It works for the edge versions o jQuery, so it's probably a bug that was already solved. For it to work on Firefox, it needs to be prefixed with -moz.

13
  • 6
    both work for me... Chrome v30.0.1599.101
    – tckmn
    Oct 31, 2013 at 1:36
  • 1
    OSX 10.6, Chrome v27.0.1453.116, reported issue is true for me (red only animated with jquery library enabled).
    – erewok
    Oct 31, 2013 at 1:46
  • 1
    Windows 7 - Chrome Version 30.0.1599.101 reported error is true. Oct 31, 2013 at 1:48
  • 1
    Not working (only the red moves) Mac OSX Maverics, Chrome 30.0.1599.101
    – frnhr
    Oct 31, 2013 at 2:05
  • 1
    jsfiddle.net/robertrozas/HsPuV/6
    – Hackerman
    Oct 31, 2013 at 2:13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy