javascript - js通过触摸事件给元素添加animation动画，在安卓微信浏览器很卡，而且动画延迟很高?

Question

js通过添加class类来控制动画，class类里面写了相应的animation动画，在安卓微信里面事件触发的时候animation动画很卡，而且事件触发后等一会动画才出来。希望懂的人来回答：

1.事件是touchstart （不是click事件的那种300ms的延迟）
2.所有元素都是绝对定位（不会导致layout重绘）
3.没有添加任何延迟函数，animation-delay为0s
4.就算我不添加class类，直接把animation动画写在元素上面，通过事件控制元素显示来触发animation动画也会卡，而且动画延迟照样高
5.建议大家先用安卓手机试验一下再来回答我这个问题

代码如下：

.fadeIn{-webkit-animation: fadeIn 0.5s ease 0s both;}
@-webkit-keyframes fadeIn {
    from{opacity:0;}
    to{opacity:1;}
}

Answer 1

css的动画，android上面卡很正常，微信里面也就是凑合着，iOS上流畅无比，一直都是这样。

Answer 2

css3有部分动画在android上是会开启硬件加速的，比如transition配合transform，我在实机上测试过，速度确实挺流畅的。但是有的就不行，比如transition配合left。

透明度的话可以试下transition配合opacity。另外分享一篇关于css3动画硬件加速的参考文章。

Answer 3

这样写试下
p
{
animation: fadeIn 5s linear 2s infinite alternate;
/ Firefox: /
-moz-animation: fadeIn 5s linear 2s infinite alternate;
/ Safari 和 Chrome: /
-webkit-animation: fadeIn 5s linear 2s infinite alternate;
/ Opera: /
-o-animation: fadeIn 5s linear 2s infinite alternate;
}