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

Home Forums CSS Css Keyframe animation on click is added and removed only once Reply To: Css Keyframe animation on click is added and removed only once


@ amanda_

Hi Amanda, thanks, first off, sorry the original link was off, the site is live at:

The code is rather huge, I have put up a codepen, but keep in mind, this works on codepen etc, it specifically does not work on the android phones with the stock browsers, and currently not even on chrome mobile. (and for some reason, not in ie10 and ie11, my previous solution did work even on window os mobiles, but not at all in the stock android browser.).

Here is the pen, the css and JS are large, let me explain the js first step by step, I have loaded the version 1 jquery version, as this made some stuff work on old android browsers.
– The commented out first function, I have tried to load Jquery on document load(fail, but doesnt matter, if someone knows how to do it, let me know lol)
– function”lazy” deffers loads images, gets very good loading speed despite many pics. This works in all browsers.
– the next to functions(jQuery), animate the header and the main menu on click, this works cross browser, all good.
-Now in the source code, from line 2031, that is the fly in fly out functionality, as you see, I have done this in vanilla js(I prefer vanilla, despite the many headaches), this or the css keyframes is where something goes wrong, again, it works on codepen, chrome, firefox desktop view as intended, to reproduce the error, one has to use the stock android or chrome browser on an android mobile.

The codependoes not have the pics, the live page has everything, the menu trigger on the codepen is the violet line, you have to drag open the menu on codepen to see the page somewhat.

Keep in mind i will rewrite the function in Jquery now and try a different jquery version as well(trying some stuff, so the live page might not work properly for random minutes, as i am adding the changes straight to the server.

As of now, it looks like i will have to load a specific android mobile css after user agent sniffing, this is something I am trying to avoid.

Thank you