Edit Question - KnowledgeHub

Title Body

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!?

Tags (comma-separated) Cancel