【前端】CSS3中使用tansform的scale导致文字抖动以及模糊的解决办法

最近给公司网站做一个动画，但是该动画影响了文字的的正常显示。
于是乎，百度+谷歌之后整理如下，以便下次踩到这个坑时可以及时跳出来，毕竟这个需求还是挺常见的 :)

先看看是什么问题：

动画是加在图片上的，但是却影响了其他文字，至于为什么会导致这样的问题，暂时还没有找到答案。

解决办法

 Part1. 在该动画的transform里加上translateZ(0)值, 能解决文字抖动的问题，但是没解决文字模糊的问题。
 Part2. 在发生文字模糊的地方加上transform: translate3d(0,0,0)，解决文字模糊以及的问题。

解决后：

综合以上，使用scale发生文字抖动及模糊时，在该文字的css中只需要加入transform: translate3d(0,0,0)即可解决问题。
PS：知道为什么会发生这样的问题的原理的小伙伴请私信我噢，谢谢啦~

转载于:https://www.cnblogs.com/wuzhi123/p/8686422.html