Dlaczego Chrome nie może animować filtra CSS?

Natknąłem się na to, co może, ale nie musi być błędem w Chrome. Mam animację klatki kluczowej, która animuje rozmycie css elementu od 50px do 0px.Dlaczego Chrome nie może animować filtra CSS?

Działa dobrze w Safari, ale Chrome w ogóle go nie lubi. Oto, co powinieneś zobaczyć

enter image description here

A oto co ja rzeczywiście zobaczyć w Chrome na OS X enter image description here

Herezje JSFiddle powinna chcesz dostosować kod.

Musisz przyjrzeć się temu w Chrome, a jeśli zobaczysz to w Safari, zobaczysz, czego oczekiwałem.

Próbowałem już zdefiniować widoczność od tyłu, uruchamiającą akcelerację sprzętową, ale żadna z nich nie działa.

Oto kod dla potomności w przypadku, gdy czytasz to w 2021, a JSFiddle został usunięty przez 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>

Źródło

2013-08-30 gargantuan

"Dlaczego obsługa Chrome nie powoduje rozmycia css w taki sam sposób, jak Safari?" Ponieważ Chrome to nie Safari. – BoltClock

+1 za wzmiankę "NSA Robot Overlords" – GLES

WebKit => Chrome == Safari, jeśli nie Chrome === Safari: D – GLES

Znalazłem odpowiedź na to pytanie: Chrome cannot apply filter:hue-rotate() and transform....

Rozwiązaniem jest zastosowanie dwóch animacji klatki kluczowej, jednej dla skali i krycia, a drugiej dla rozmycia. Oto 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); 
     } 
    }

który jest stosowany tak ...

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

Nadal uważam, że jest to problem, ale przynajmniej istnieje obejście.

Źródło

2013-08-31 15:07:32 gargantuan

To działa - 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;*/ 
}

Trzeba tylko usunąć atrybut animation-fill-mode ponieważ służy innemu celowi niż to, co jest (lub może być) spodziewa - animation-fill-mode-not-working.

Źródło

2013-08-30 16:24:23 GLES

Działa również w Chrome na Linuksie. –

Nie jest od razu oczywiste, co się zmieniło. Chcesz wyjaśnić? – BoltClock

@BoltClock Dzięki za sugestię! Zmusiłem się do zmiany :) – GLES

Dlaczego Chrome nie może animować filtra CSS?

Odpowiedz

Powiązane problemy