答案 0 :(得分：1)
图像的实际尺寸为140 x 198.您正在缩小并将其扩展到不同的大小。由于光栅图像的工作方式，这会导致模糊和/或失真。使用更大的源图像，更高的DPI，或者不要将其扩展到源图像的基本大小之外。
否则，任何javascript动画的感知“平滑度”都非常依赖于客户端计算机的资源。如果你的浏览器线程在内存上运行很高（Firefox + Firebug可以在几个小时的工作后释放出1GB的常驻RAM消耗！），或者如果你的系统没有很多可用的资源，动画可以生涩，屏幕渲染可能很慢或很糟糕。
除了缩放造成的失真外，您的动画在我自己的计算机上运行顺畅（我有很多资源可以使用：P）
文档
答案 1 :(得分：0)
将黑卡调整到所需尺寸。你正在使用600px宽的原件并将其缩小到75px宽;这就是失真的原因。
答案 2 :(得分：0)
我的猜测是浏览器不会对黑卡进行反别名，因为它不在视图中。在动画期间，浏览器正在快速更新蓝卡的位置和比例。作为一种性能测量，可能会推迟消除锯齿，直到浏览器有足够的空间来呼吸超出紧密的setTimeout循环提供的范围。