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.
- Without jQuery (notice both animations working): http://jsfiddle.net/HsPuV/3/
- With jQuery (only red is working): http://jsfiddle.net/HsPuV/4/
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.