关于css3 transform一些小坑

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

回答：

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

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

转载于:https://www.cnblogs.com/ladycat/p/9260323.html