web-dev-qa-db-ja.com

変換を伴うCSS3アニメーションは、Webkitでぼやけた要素を引き起こします

したがって、さまざまな効果（_border-radius_、_box-shadow_、およびtransform: scale()）が適用されたネイティブ要素（divs）がいくつかあります。それらをアニメートすると、2つの奇妙なことが起こります。

  1. スケールをアニメーション化しようとはしていませんが、アニメーションにスケールを入れないと無視されます。
  2. アニメーションにスケールを入れると、Webkitは要素をぼかします

ここの例を参照してください： http://jsfiddle.net/trolleymusic/RHeCL/ -下部のボタンが問題を引き起こします。

最初の問題はFirefoxでも発生するので、それがアニメーション仕様の動作方法であるためだと思います。私が望んでいたものではありませんが、わかりました、私はそれと一緒に住んでいます。

2番目の問題は奇妙です。私はそれが3d変換と関係があることを知っています。なぜなら私が（テスト目的のためだけに）円上で_-webkit-perspective_または_-webkit-transform-style: preserve-3d;_を宣言するからです要素、それは同様にぼやけの問題を引き起こします。私の混乱は、zインデックスをすべて変換しようとしているのではなく、translateYの代わりに純粋にtranslateを使用してアニメーションを試したことです。

Chrome（18）、Chrome Canary（20）、Safari（5.1.2＆5.1.4））で発生します。

それで、私は私が起こっていると思うことで正しいですか？そして、どうすればぼやけを避けることができますか？

最悪のシナリオ：要素をスケーリングする代わりに異なるサイズを使用できますが、これは実際には問題ではありませんが、これはより洗練された解決策になると思い、今ではこの問題が発生しています。

animationcsswebkitcss-animations
21
Trolleymusic

要素がぼやけている理由については、この回答を参照してください： https://stackoverflow.com/a/4847445/814647

上記の概要：WebKitは、アニメーション化する前に元のサイズ/ CSSを取得し、それを画像として処理します。次に、スケールアップしてぼやけを生成します。

解決策：初期サイズを最大のスケールにし、最初は低いスケールで開始します（したがって、あなたの場合は、サイズを5増やし、初期スケールを0.2に設定します）

[〜＃〜]更新[〜＃〜]

私が理解していることから現在のスケールを無視する理由は、あなたが特に翻訳だけを設定していないからです（私は今それのためにCSSを探しています）。 -webkit-animationを実行すると、現在のすべての変換（スケール）がリセットされるため、スケールがそこにあることを確認する必要があります。私は変更するCSSを検索しているので、位置だけが変更されます。

18
Josh Allen

私が見つけた最善の方法は、アニメーションが完了するのを待ってから、変換を要素に直接適用して、アニメーションクラスを削除することです。このようなものは私にとってはうまくいき、グリッチは発生しません：

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

私はjQueryとは異なるライブラリを使用していますが、あなたはその考えを理解しています。

0
Gianluca Pinoci