Element gets blurry after transition or animation

Question

After I use CSS transition or animation that includes rotate the whole containing div gets a little bit blurry,
I read that it is some kind of side effect from redrawing the element, but is there a way to prevent it?

.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);
}

I tries to achieve the same with animate and got the same result

Update: I noticed something weird happening - in chrome, when the animation runs the element gets blurry and when the animation stops it return to normal,
on iOS however it happens the other way around - the image is clear while animated but gets blurry when completed! another weird @$$ bug!?

Answer 1

Ive seen issues such as this before after doing animations. Check the dimensions of the object after the transition, it may very well have changed in size by a few points causing blurry-ness. i,e:

Before transition: 36x36 After Transition: 36.2 x 36.8