CSS 过渡在 Safari 中不起作用

Question

当您将鼠标悬停在 image1div 上时，它会缩放到 0.95 并逐渐变为 80% 的不透明度。它适用于 Chrome 和 Firefox，但不适用于 Safari。它在 Safari 中会立即消失和缩放，而不是在 0.5 秒内平滑地消失。

.image1div {
 width: 350px;
 height: 350px;
 margin-top: 0px;
 float: right;
 background-color: #5a89ad;
 background-size: cover;
 filter:alpha(opacity=100);
 -webkit-transform: scale(1,1);
     -ms-transform: scale(1,1);
         transform: scale(1,1);
 -webkit-transition: opacity 0.5s ease, transform 0.5s ease;
         transition: opacity 0.5s ease, transform 0.5s ease;    
}

.image1div:not(.no-hover):hover {
  -webkit-transform: scale(0.95,0.95);
      -ms-transform: scale(0.95,0.95);
          transform: scale(0.95,0.95);
  opacity:0.8;
  filter:alpha(opacity=80);
}

Answer 1

我认为这与过滤器属性有关。 Safari 支持过渡：http://caniuse.com/#feat=css-transitions 同样是过滤器属性，不过需要加前缀：http://caniuse.com/#feat=css-filters 让我知道是否有帮助，如果没有，请提供更多详细信息，我们会找到解决方法。

-- 编辑而不是过渡：不透明度，变换。使用全部，或查看如何添加多个属性 CSS transition shorthand with multiple properties?

CSS 过渡在 Safari 中不起作用

CSS transition is not working in Safari

css

safari