这是在Android机型上发现的问题。
比如,有2个CSS animation动效先后应用在同一张图片上,两个动效里面都涉及到scale(缩放)。
那么很有可能,第二个动效开始后,图片变得很模糊(特别是图片上有文字的情况,尤为明显)。
一个解决办法是,在每一个动效完成之后,就重置一下目标对象的style.animation属性。
document.getElementById('motion-img01').style.animation = "";
然后,再开始添加新的动画效果。
目前测试的情况是,iOS上面不加这个重置动作,多个动画能够很好地正确执行;Android机器上,则不然,前一个动效的最终结果可能对下一个动效产生影响。