8

I have some weird issues with css3 animation.

I have block elements with css3 transformation applied. When transformation applied with -webkit-transform matrix — elements look very smooth. But when i try to apply animation with -webkit-keyframes , fonts and some other div's look awful during animation.

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

Issues can be seen in 'webkit browsers Safari / Chrome' etc.

Satinder singh
  • 10,100
  • 16
  • 60
  • 102
John Melio
  • 81
  • 1
  • 2

1 Answers1

9

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 the animated element CSS Check this for more

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Thank you for you answer! Unfortunately, this solution didn't work for my case... – John Melio Jul 09 '12 at 10:13
  • Check this link for more http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform – sandeep Jul 09 '12 at 10:30