android下css3动画非常卡，GPU也不差啊

Question

测试用机是米3。做的一个场景动画，iphone4下都很流畅，而安卓机跪了，尤其集中在面积较大的动画执行上，米3惨不忍睹，MOTO G稍微好一点，大家有什么好建议吗

Answer 1

Let’s optimize it in the following order:

1. Whether it causes layout
   If so, make animated elements absolute as much as possible to avoid affecting the document tree and causing large-area layout recalculations.
2. Whether to enable hardware acceleration
   "CSS3 animation is used" and "hardware acceleration is turned on" are two different things, although the former may lead to the latter.
   There is a magical panacea in webkit for turning on hardware acceleration: opacity: 1; or -webkit-backface-visibility: hidden;.
3. Whether it has high-cost attributes (css shadow, background-attachment: fixed, etc.)
   If available, pictures are also an option. This can be regarded as an optimization that trades space for time.
4. Repaint area
   If so, we have to reduce the animation area. The optimization of this step is limited and basically relies on the above three

Go over the wall and read High Performance Animations: