css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时,暂时用旋转减少抖动
在使用css3 transform:scale(1.2)时遇到一个问题,就是发现文本会抖动。大概就时文本会先变模糊、再变清晰。
经过测试,可以通过旋转来减少抖动的感觉。添加了rotate(0.1deg)后,文本变模糊,但不会再变回清晰。
我使用的场景,鼠标经过时,li放大一些以区分其他列表上的li。
CSS:
transform: scale(1) translateZ(0) rotate(0deg);//鼠标未经过
transform: scale(1.01) translateZ(0) rotate(0.1deg);//鼠标经过
/***动画时间***/
-webkit-transit