爲什麼不通過Chrome爲CSS過濾器設置動畫效果？

我偶然發現Chrome中可能存在或不存在的問題。我有一個關鍵幀動畫，可以將元素的css模糊從50px變爲0px。爲什麼不通過Chrome爲CSS過濾器設置動畫效果？

它在Safari中運行良好，但Chrome似乎並不喜歡它。下面是你應該看到

enter image description here

這裏就是我在Chrome居然看到在OS X enter image description here

繼承人JSFiddle應該要調整代碼。

您需要在Chrome中查看它，並且如果您在Safari中查看它，則會看到我期望的結果。

我試過定義背景能見度觸發硬件加速，但都沒有效果。

這裏是HTML的後代，以防你在2021年閱讀這篇文章，JSFiddle已被NSA Robot Overlords取消。

<!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

提及「NSA機器人霸主」+1 +1 – GLES

WebKit => Chrome == Safari如果不是Chrome === Safari：D – GLES

我在這個問題中找到了答案：Chrome cannot apply filter:hue-rotate() and transform...。

解決方案是應用兩個關鍵幀動畫，一個用於縮放和不透明度，另一個用於模糊。這是一個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感謝您的建議！我已經做出了必要的更改:) – GLES

爲什麼不通過Chrome爲CSS過濾器設置動畫效果？

回答

相關問題