how to replicate JQtouch smooth iphone animations?

Question

Hi!

so, i know how to do this by theory, buy when i try the animation is really laggy.

what i"m doing: i got this UL with all sort of items and text (really standard) and when i want to animate it i just add with JS a class "flipout" like so: element.className = "flipout";

the CSS for the animation looks like this:

.flipout{
-webkit-animation-duration: .55s;
-webkit-animation-name: flipout_anim;
-webkit-transform-origin: left;

}

@-webkit-keyframes flipout_anim {
    from {
    -webkit-transform: translateX(0%);
}
to {
    -webkit-transform: translateX(-100%);

}
}

the same HTML moves smooth as silk with JQtouch.. what am i doing wrong?!

Answer 1

the solution: use translate3d(x,y,z); moves smooth.