-webkit-transition-property for translation

Question

Hai.
What is the transition property for translations in CSS3? I'm currently using all but I got a bug in iOS so I want to test another property.

-webkit-transform: translate(-320px, 0);

 

-webkit-transition: ??? .5 ease-in-out;

See the bug with an iOS device here (swipe horizontally), there's a kind of flash.

---

Update: to anyone interested, I found a way to fix it thanks to Duopixel:

E {
    -webkit-transition: all .5s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0); // perform an "invisible" translation
}

// Then you can translate with translate3d(), no bug!
document.querySelector('E').webkitTransform = 'translate3d(-320px, 0, 0)'

Answer 1

Your solution will work, however it the exact answer you were looking for is -webkit-transform.

-webkit-transition: -webkit-transform .5s ease-in-out;

Answer 2

There are tons of things you can transition, the easiest to test in my experience is opacity.

However, I've encountered the flashing problem before, try:

-webkit-transform: translate3d(-320px, 0, 0);

This will kick in hardware acceleration, which fixes the problem and makes the animation extremely smooth.