2016-07-23 13 views
0

Ich habe eine automatische Scroll Div, aber ich habe ein Problem, wenn es zu scrollen, der Text verschwommen kann Kann mir jemand dabei helfen?Animation - Text verschwommen, wenn es zu scrollen

Beispielbild. enter image description here hier ist mein 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); 
    } 

}

+0

Haben Sie verschiedene Browser ausprobiert? Ich habe in Firefox festgestellt, dass Text und Bilder bei der Transformation mit CSS in der Regel unscharf werden, während die Animation abgespielt wird. Vielleicht versuchen Sie 'translate()' anstelle von 'translate3d() 'zu verwenden –

+0

@amorten Mein aktueller Browser ist Chrom, ich habe es nicht auf Firefox versucht. Ich habe Ihren Vorschlag ausprobiert, das 'translate3d()' in 'translate()' zu ändern, hat aber nicht funktioniert. – nethken

+0

Ist Ihre Website online, damit ich sie in Aktion sehen kann? –

Antwort

1

Ich habe versucht, imitiert, was ich von Ihrer Beschreibung in diesem jsfiddle erhalten.

Der größte Unterschied ist, dass Sie versuchen können, die folgenden Eigenschaften für OSX zu verwenden, obwohl ich keinen Unterschied in meinen Tests sah.

Ich habe die oben genannte Geige in Firefox, Chrome und Safari getestet und der Text erscheint in allen scharf. Die einzige Unschärfe, die ich bemerkt habe, ist von der Reaktionszeit in meinem Monitor, also könnte es das sein, was Sie auch bemerken.

Stellen Sie außerdem sicher, dass die Unterstützung für alle Browser sind in Ihrem .events:hover {}, indem:

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

eine gute Möglichkeit für Monitor Unschärfe zu testen, würde einen Screenshot zu nehmen, während es Animieren und wenn es nicht und dann vergleiche die beiden.

Verwandte Themen