css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时，暂时用旋转减少抖动-笔记-零分杂记-收集建站知识，分享网络资源

当前位置：首页 » 笔记 » css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时，暂时用旋转减少抖动正文

css3 transform 在过渡时可能会发现抖动或者闪烁特别是放大scale时，暂时用旋转减少抖动

零分
2024-02-20 18:09
2,502

在使用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-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);

虽还是不算满意，但也解决了闪了一下的感觉。就当文本模糊时经过的效果吧。

兼容性写法：

transform:scale(1.2) translateZ(0) rotate(0.1deg);
-ms-transform:scale(1.2) translateZ(0) rotate(0.1deg);　　　　    /* IE 9 */
-moz-transform:scale(1.2) translateZ(0) rotate(0.1deg);　　　    /* Firefox */
-webkit-transform:scale(1.2) translateZ(0) rotate(0.1deg);　    /* Safari 和 Chrome */
-o-transform:scale(1.2) translateZ(0) rotate(0.1deg);　　　　    /* Opera */

声明：博客中如无特殊说明或标注的文章均为博客原创文章，部分文章来源互联网，如有侵犯您的版权，或者对零分博客发布的文章有异议，请来信告知删除、修改，如您有好的建议或者意见也可以来信，谢谢！

请TA喝杯水^_^ 如本文“对您有用”，欢迎随意打赏，让我们坚持创作！ 请TA喝水