CSSをアニメーションが不透明で歪んだテキストのためにぼやけてしまいます<1

-2

CSSアニメーションによるぼかしを扱うトピックがたくさんあることは知っていますが、動作しません。CSSをアニメーションが不透明で歪んだテキストのためにぼやけてしまいます<1

私は私の正確な問題のミニマリストのセットアップを示すcodepenを作った：

基本的に、私は10度スキューされた不透明度0.95とdivを持っている、そしてその内側の内容によって歪めています - 10度（直立しているように）。このコンテンツの中には段落が一番下にあります。その上にマウスを置くと、段落のアニメーションが右にシフトされます。残念ながら、これはページ上のすべてのテキストをぼかします。

スキュー変換または不透明度設定のいずれかを削除すると、テキストはもはやぼかしにならないことに注意してください。

出典

2016-03-20 ericgrosse

を使用することができますか？ 'opactiy：.95'とぼかしバグと' opacity：1'の中から選択してください。ぼかしバグはありません。それは何ですか？ –

両方のプロパティが必要な場合を除き、私はこの質問を投稿しません。 – ericgrosse

私は完全な答えを与えることはできません（100％権威ある説明はありません）が、それはブラウザでのレンダリングとレイヤーの作成が加速されたためです。 Chromeの場合、 '.jumbotron * {backface-visibility：hidden;}'は問題を完全に修正しますが、IE11とFirefoxではまだ何もしません。 – Harry

これはおそらく、ブラウザが処理を高速化するようにするskewと逆のskewによって引き起こされます。しかし、あなたは、この結果を得るために2 skewsを適用する必要はありませんあなたはすでに...修正バグを設定する不透明度を削除すると、なぜあなたはそれを削除しないことを知っているので、あなたもgradient background

background:linear-gradient(170deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 164px, #a3d5d3 163px, #a3d5d3 calc(100% - 165px), rgba(0,0,0,0) calc(100% - 165px), rgba(0,0,0,0) 100%);

出典

2016-03-20 12:46:37 xpy

おかげさまで、角度のある勾配 – ericgrosse

CSSをアニメーションが不透明で歪んだテキストのためにぼやけてしまいます<1

答えて

関連する問題