关于css3 transform一些小坑

1.如何让已经执行结束的动画再跟随事情执行;

回答:

/**
* 监听动画是否执行完毕
* */
document.getElementById("xxxxx").addEventListener('animationend',function(){
$(".xxxx").css("animation","none");
});
监听动画执行结束后移除动画,再下次需要执行时再重新添加

2.在div进行css3动画时(translate,scale)容易发生字体变模糊再回复的情况
transform变换会在浏览器上单独创建一个绘画层并重新进行渲染,由于图层渲染的时候也处理了周围的文字,如果高度为奇数的文字可能会存在半个像素的计算量,浏览器对这半个像素会进行优化渲染,所以边缘会出现模糊的情况。
所以只需要把奇数变成偶数即可



posted @ 2018-07-03 19:49  small_lady  阅读(320)  评论(0编辑  收藏  举报