-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)'

score 21 · Answer 1 · edited Jan 24 '15 at 20:31

21

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

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

edited Jan 24 '15 at 20:31

Brendon Muir

4,540
2
33
55

answered Apr 23 '12 at 17:34

Patrick

13,872
5
35
53

Incase it doesn't work for anyone, add an 's' after the '.5' to make '.5s' – Ben Taliadoros Oct 23 '14 at 14:45

score 5 · Accepted Answer · edited Nov 30 '12 at 00:59

5

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.

edited Nov 30 '12 at 00:59

alex

479,566
201
878
984

answered Dec 31 '10 at 19:25

methodofaction

70,885
21
151
164

I still got a flash at the first swipe, then it disappears. I think I'll have to deal with it. Thanks anyway! – seriousdev Dec 31 '10 at 22:35
1

Try -webkit-backface-visibility: hidden; related: http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker – methodofaction Jan 01 '11 at 15:19

-webkit-transition-property for translation

2 Answers2