-webkit-transition-property per la traduzione

Question

Hai.
Qual è la proprietà di transizione per le traduzioni in CSS3? Attualmente sto usando all ma ho un bug in iOS, quindi voglio testare un'altra proprietà.

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

 

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

Vedere l'insetto con un dispositivo iOS here (striscia in orizzontale), c'è una specie di flash.

---

Aggiornamento: a chiunque sia interessato, ho trovato un modo per risolvere il problema grazie a 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

ci sono tonnellate di cose che si possono transizione, il più facile da testare nella mia esperienza è opacità.

Tuttavia, ho incontrato il problema di lampeggiare prima, provare:

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

Questo entreranno in gioco l'accelerazione hardware, che risolve il problema e rende l'animazione estremamente liscia.

Answer 2

La soluzione funzionerà, tuttavia la risposta esatta che stavi cercando è -webkit-transform.

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