What are the “golden rules” to increase CSS3 transition performance on mobile devices?

Question

I am using some really simple CSS3 transitions in my app like in the following example where I try to slide in a div container from left to right:

        
                      

              相关标签:
       
      

Answer 1

Try to animate transform instead of left property, it works really smooth on even old iOS devices.

#navi {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#navi.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}

Fiddle: http://jsfiddle.net/x8zQY/2/

2017/01 update: Please read this great article about animation & GPU rendering, profiling and optimising techniques https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/