Css3 animated artifacts

Question

I have some strange problems with css3 animations .

I have block elements with css3 transformation . When the transform used with the -webkit-transform matrix , the elements look very smooth. But when I try to apply animation with -webkit-keyframes , fonts and some other divs look awful during the animation.

A sample can be found here: http://shuma.ru/animation.html

Problems can be seen in Safari / Chrome web browser browsers, etc.

Answer 1

For this problem you can write this on you css.

 body{ -webkit-perspective: 1000; -webkit-backface-visibility: hidden; } 

& for safari define this:

 -webkit-transform:translate3d(0,0,0); 

in an animated CSS element. Check it out for more