アニメーション - スクロールの開始時にテキストがぼやけて表示

Question

私は自動スクロールdivを持っていますが、スクロールを開始すると1つの問題があり、テキストがぼやけてしまいます。

サンプル画像ここ は私の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 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; 
} 

良い方法は、それが当時とないとき、それはアニメーションといながら、スクリーンショットを撮ることであろう2つを比較する。