なぜChromeはCSSフィルタをアニメーション化しませんか？

Chromeのバグの可能性があります。私は50pxから0pxに要素のCSSブラーをアニメーション化するキーフレームアニメーションを持っています。なぜChromeはCSSフィルタをアニメーション化しませんか？

Safariでは正常に動作しますが、Chromeはまったく気に入らないようです。ここでは、

enter image description here

を見るべきだとここで私は実際に enter image description here

は、相続人JSFiddleあなたは、コードを微調整したいはずですOS X上のChromeで見るものです。

Chromeで見る必要があります。Safariで見ると、何が起こるのかがわかります。

ハードウェアアクセラレーションをバックグラウンドでトリガすることを定義しようとしましたが、どちらも効果がありません。

2021年にこれを読んでおり、JSFiddleがNSA Robot Overlordsによって取り下げられた場合のための、後世のHTMLです。

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 

      @-webkit-keyframes TRANSITION-IN { 
       0% { 
        -webkit-transform: scale(0.5); 
        opacity: 0; 
        -webkit-filter: blur(50px); 
       } 
       100% { 
        -webkit-transform: scale(1); 
        -webkit-filter: blur(0px) !important; 
       } 
      } 

      h1 { 
       width: 500px; 
       height: 500px; 
       line-height: 500px; 
       background: #000; 
       color: #fff; 
       margin: 40% auto; 
       text-align: center; 

       -webkit-animation-name: TRANSITION-IN; 
       -webkit-animation-duration: 0.25s; 
       -webkit-animation-timing-function: ease-out; 
       /* -webkit-animation-fill-mode: forwards; */ 
      } 

     </style> 
    </head> 
    <body> 

     <h1>BOO!</h1> 

    </body> 
</html>

出典

2013-08-30 gargantuan

"なぜChromeはSafariと同じ方法でCSSを処理しないのですか？" ChromeはSafariではないためです。 – BoltClock

+1 "NSA Robot Overlords"と書かれています。 – GLES

WebKit => Chrome == Safariの場合=== Safari：D – GLES

この質問の回答は、Chrome cannot apply filter:hue-rotate() and transform...です。

解決策は、スケールと不透明度の2つのキーフレームアニメーションと、ぼかしのためのもう1つのキーフレームアニメーションを適用することです。ここにはfiddleがあります。このように適用される

@-webkit-keyframes TRANSITION-IN { 
     0% { 
      -webkit-transform: scale(0.5); 
      opacity: 0; 
     } 
     100% { 
      -webkit-transform: scale(1); 
      margin-top: 0; 
     } 
    } 

    @-webkit-keyframes BLUR-IN { 
     0% { 
      -webkit-filter: blur(50px); 
     } 
     100% { 
      -webkit-filter: blur(0px); 
     } 
    }

...

-webkit-animation-name: TRANSITION-IN, BLUR-IN;

は、私はまだ、これはバグだと思うが、少なくとも回避策があります。

出典

2013-08-31 15:07:32 gargantuan

これは動作します - jsfiddle

@-webkit-keyframes TRANSITION-IN { 
    0% { 
     -webkit-transform: scale(0.5); 
     opacity: 0; 
     -webkit-filter: blur(50px); 
    } 
    100% { 
     -webkit-transform: scale(1); 
     -webkit-filter: blur(0px) !important; 
    } 
} 

h1 { 
    width: 500px; 
    height: 500px; 
    line-height: 500px; 
    background: #000; 
    color: #fff; 
    margin: 40% auto; 
    text-align: center; 

    -webkit-animation-name: TRANSITION-IN; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-timing-function: ease-out; 
    /*-webkit-animation-fill-mode: forwards;*/ 
}

は、あなたはそれはあなたが何であるかよりも、異なる目的を果たす（またはかもしれない）ので、期待しanimation-fill-mode属性を削除する必要があります - animation-fill-mode-not-working。

出典

2013-08-30 16:24:23 GLES

LinuxのChromeでも動作します。 –

あなたが何を変更したのかはすぐに分かりません。説明するケア？ – BoltClock

@BoltClockご意見ありがとうございます！私はreq'd変更を作った:) – GLES

なぜChromeはCSSフィルタをアニメーション化しませんか？

答えて

関連する問題