Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 animation artifacts

Tags:

html

css

webkit

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.

like image 306
John Melio Avatar asked Jul 09 '12 08:07

John Melio


People also ask

How many types of animation are there in CSS?

animation-timing-function. animation-delay. animation-iteration-count. animation-direction.

How do I style an animation in CSS?

To make a CSS animation, you need three things: an HTML element to animate, a CSS rule which binds the animation to this element, and a group of keyframes that defines the styles at the start and end of the animation. You can also add declarations to further customize your animation, like speed and delay.


1 Answers

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

like image 123
sandeep Avatar answered Sep 23 '22 18:09

sandeep