转换或动画后元素变得模糊

Question

使用包含transition的CSS animation或rotate后，整个包含div会变得有点模糊，
我读到重绘元素会产生某种副作用，但有没有办法阻止它呢？

.toggle {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: 7px;
    right: 94px;
    z-index: 200;
    background: transparent url("../img/handle-open.png") no-repeat;

    -webkit-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
       -moz-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
            transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
}

.toggle-closed {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
            transform: rotate(180deg);
}

我尝试用animate实现相同的效果并得到相同的结果

更新：我注意到一些奇怪的事情 - 在chrome中，当动画运行时元素变得模糊，当动画停止时它恢复正常，
然而，在iOS上却发生了相反的情况 - 图像在动画时很清晰，但在完成时会变得模糊！另一个奇怪的@ $$ bug！？

Answer 1

在做完动画之前我已经看到了这样的问题。转换后检查对象的尺寸，它可能会在几个点上发生变化，导致模糊。 I，E：

转型前：36x36  过渡后：36.2 x 36.8