html - Phonegap transitions on CSS transforms not rendering. -

i'm having bit of trouble working css transitions on phonegap. we're transitioning transform: translate3d property have content views slide in , out of view, sliding reveal side bar.

here's example of webapp (note transitions work in browser): http://ferriesapp.ca/app/

you see transitions work in browser both on phone , on desktop. "phonegap" transitions don't render. final position shows up, example if hit departing list item show corresponding arrival list items. reason animation doesn't happen on phone gap. exception works on ios7 when put through phonegap, not ios 6 or version of android.

here's small snippet of code:

here css on sliding element looks like

#depart-content {     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     transform: translate3d(0,0,0);     -webkit-transform: translate3d(0,0,0);     -moz-transform: translate3d(0,0,0);     -ms-transform: translate3d(0,0,0);     -o-transform: translate3d(0,0,0); } 

here's animation class:

.animate {     transition: transform 0.2s ease-out;     transition: -webkit-transform 0.2s ease-out;     transition: -moz-transform 0.2s ease-out;     transition: -ms-transform 0.2s ease-out;     transition: -o-transform 0.2s ease-out; } 

and js calls (note not whole function):

$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"}); 

if has suggestions hugely appreciated

thanks!

p.s. know there css3 @keyframes rule works quite well, i'd rather avoid simplicity of code

your statement working on ios7 not on ios6 leads me believe happening due translate3d statement.

i assuming put in line enable hardware acceleration -

 transform: translate3d(0,0,0); 

however, there several reports not infact trigger hardware acceleration in ios 6 devices.

in article quoted, author mentions using 1 of following commands, trigger hardware acceleration.

-webkit-transform: translatez(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;