क्रोम एक सीएसएस फ़िल्टर एनिमेट क्यों नहीं करेगा?

मैं क्रोम में एक बग क्या हो सकता है या नहीं हो सकता है। मेरे पास एक कीफ्रेम एनीमेशन है जो किसी तत्व के सीएसएस ब्लर को 50px से 0px तक एनिमेट करता है।क्रोम एक सीएसएस फ़िल्टर एनिमेट क्यों नहीं करेगा?

यह सफारी में ठीक काम करता है, लेकिन क्रोम इसे बिल्कुल पसंद नहीं करता है। यहाँ तुम क्या

enter image description here

देखना चाहिए है और यहाँ क्या मैं वास्तव में ओएस एक्स पर क्रोम में देखने enter image description here

उसके बारे में यहां JSFiddle आप कोड में और सुधार करना चाहते हैं चाहिए।

आप Chrome में इस पर गौर करने की आवश्यकता होगी, और यदि आप इसे सफारी में देखने आप देखेंगे कि मैं क्या होने की अपेक्षा।

मैं परिभाषित करने backface दृश्यता हार्डवेयर त्वरण ट्रिगर की कोशिश की है, लेकिन उन में से कोई भी एक प्रभाव है।

यहाँ भावी पीढ़ी के लिए एचटीएमएल मामले में आप 2021 में यह पढ़ रहे है और JSFiddle एनएसए रोबोट 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

"क्रोम सीएसएस ब्लर को संभालने का तरीका क्यों नहीं है सफारी करता है?" क्योंकि क्रोम सफारी नहीं है। – BoltClock

+1 "एनएसए रोबोट ओवरलोर्ड्स" का उल्लेख करने के लिए +1 – GLES

वेबकिट => क्रोम == सफारी अगर क्रोम नहीं है === सफारी: डी – 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

लिनक्स पर क्रोम पर भी काम करता है। –

यह तुरंत स्पष्ट नहीं है कि आपने क्या बदल दिया। समझाने की परवाह? – BoltClock

@ बोल्टक्लॉक आपके सुझाव के लिए धन्यवाद! मैंने req'd परिवर्तन किया है :) – GLES

क्रोम एक सीएसएस फ़िल्टर एनिमेट क्यों नहीं करेगा?

उत्तर

संबंधित मुद्दे