Alex Rivera | Logout

css3 animation artifacts

Asked 2012-07-09T08:55:43.413
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.

html css webkit
Edit
Report

1 Answer

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

answered 2012-07-09T09:15:26.243

Your Answer