nethken nethken - 4 months ago 25
HTML Question

Animation - text get blurry when its start to scroll

I have a auto scrolling div but i have one problem when it starting to scroll, the text get blurry Can someone help me about this?

sample picture.
enter image description here
here is my css

.events {

animation: autoscroll 25s ease-in-out infinite;
animation-delay: 2s;


}
.events:hover {
-webkit-animation-play-state: paused;
}
@keyframes autoscroll {
from {

transform: translate3d(0,0,0);

}
to {
transform: translate3d(0,-90%,0);
}


}

Answer

I've tried mimicking what I get from your description in this jsfiddle.

The biggest difference is that you can try using the following properties for osx, though I didn't see any difference in my testing.

text-rendering: optimizeLegibility; // SVG property
-webkit-font-smoothing: antialiased; // Font-smoothing on osx in Safari/Chrome
-moz-osx-font-smoothing: grayscale; // Font-smoothing on osx in Firefox

I tested the above fiddle in Firefox, Chrome and Safari and the text appears sharp in all. The only blur I noticed is from the response time in my monitor, so that may be what you're noticing as well.

Also, make sure to include support for all browsers in your .events:hover {} by including:

.events:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

A good way to test for monitor blur would be to take a screenshot while it's animating and when it's not and then compare the two.