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.
animation-timing-function. animation-delay. animation-iteration-count. animation-direction.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With