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

我认为它与filter属性有关。 safari支持过渡：http://caniuse.com/#feat=css-transitions 也是过滤器属性，但您需要添加前缀：http://caniuse.com/#feat=css-filters 如果有帮助，请告诉我，如果没有，请提供更多详细信息，我们会找到解决方法。

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

CSS过渡在Safari中无效

1 个答案: