2016-07-23 46 views
0

我有一個自動滾動div,但我有一個問題,當它開始滾動,文本變得模糊可有人可以幫助我嗎?動畫 - 文本開始滾動時模糊

示例圖片。 enter image description here 這裏是我的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

您是否嘗試了不同的瀏覽器?我注意到Firefox在使用CSS進行轉換時,文本和圖像在播放動畫時通常會變得模糊。也許嘗試使用'translate()'而不是'translate3d()' –

+0

@amorten我目前的瀏覽器是鉻我沒有嘗試過在Firefox上。我嘗試了您的建議,將'translate3d()'更改爲'translate()',但無效。 – nethken

+0

您的網站是否在線,以便我可以在行動中看到它? –

回答

1

我試着模仿我從這個jsfiddle你的描述得到。

最大的區別是,你可以嘗試使用以下屬性的osx,但我沒有看到我的測試有任何不同。

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 

我在Firefox,Chrome和Safari中測試了上面的小提琴,並且文本顯得很清晰。我注意到的唯一的模糊來自我的顯示器的響應時間,所以這可能是你注意到的。

此外,請一定要包括所有的瀏覽器支持在.events:hover {}通過包括:

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

來測試顯示器的模糊將採取,而它的動畫截圖的一個好辦法,當它不是,然後比較兩者。