问题
I am trying to use css transition for filter and am getting some weird results in Safari, but works as expected in chrome. My CSS where I set the initial filter and transition (working codepen link below):
transform: translate3d(-50%,-50%,0) scale(1);
filter: blur(0px) contrast(1.1) sepia(0) saturate(1);
transition: transform 1s ease-in-out 1s, filter 1s ease-in-out 1s;
Safari is applying the filter as soon as the class with different filter atributes is added, but then after the transition delay jumping back to the original state, and animating the transition of adding the filter.
Ive recreated the problem in codpen here. It works fine in Chrome, but has the weird state jumping in Safari. Ive tried adding the -webkit- prefixes to the different css elements and their attributes, but maybe im missing something.
Any help is greatly appreciated.
来源：https://stackoverflow.com/questions/56383142/why-is-my-css-filter-transition-applying-early-in-safari