为什么我的CSS过滤器过渡在Safari早期应用？

Question

我正在尝试使用CSS过渡进行过滤，并在Safari中获得一些奇怪的结果，但是在chrome中可以正常使用。我在CSS上设置了初始过滤器和过渡的代码（下面的工作Codepen链接）：

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就会立即应用过滤器，但是在过渡延迟之后，跳回到原始状态，并为添加过滤器的过渡设置动画。 < / p>

我已经在鳕鱼here中重新创建了问题。它在Chrome浏览器中工作正常，但在Safari中却出现了怪异的状态。香港专业教育学院试图添加-webkit-前缀到不同的CSS元素及其属性，但也许我错过了一些。

非常感谢您的帮助。