Currently utilizing jQuery Mobile to design a sidebar panel:
CSS3 animations are incorporated in the body of my page (ui-content), triggering upon page load:
h1.page-title{
-webkit-animation: fade-in 1s linear;
animation: fade-in 1s linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
Everything functions as expected, except that when the link is clicked to display the panel, the animations run again (only once). Any ideas on what could be causing this?
The page-title class is unique and not manipulated by jQuery mobile in any way. It seems like it might simulate a page refresh, but oddly if the link is clicked twice the animations do not repeat.